.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    flex-grow: 1;
    gap: var(--4);
}

.hero-section > div:nth-last-child(2) {
    justify-content: start !important;
}

.movie {
    flex-grow: 1;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--3);
}

.details-container{
    display: flex;
    flex-direction: column;
    font-size: var(--4) !important;
    color: gray !important;
    transition: 0.3s ease-in-out;
}

.details-container h3,
.details-container span,
.details-container div {
    cursor: pointer !important;
}

.catalog-text > span{
    transition: 0.3s ease-in-out;
    cursor: default;
}

.catalog-text > h3 {
    font-size: var(--4) !important;
    color: darkgray;
    transition: 0.3s ease-in-out;
    cursor: default;
}

.catalog-text > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min-content;
    height: min-content;
    transition: 0.3s ease-in-out;
    img {
        height: 20px;
        width: 20px;
    }
}

.hero-section > div {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    padding: var(--5);
    border-radius: var(--3);
    gap: var(--3);
}

p {
    margin-top: var(--4);
    line-height: 1.3;
}

.glass-background {
    background: #35353533;
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}

.gap-4 {
    gap: var(--4);
}

.gap-2 {
    gap: var(--2);
}

.map-container {
    border: 1.5px solid rgba(255, 255, 255, 0.10);
}

@media (hover: hover) {
    .catalog-text:hover h3,
    .catalog-text:hover{
        color: white !important;
    }
    .catalog-text > a:hover {
        transform: scale(1.15);
    }
}

@media (max-width: 1024px) {
    .catalog-header > h2 {
        font-size: var(--5);
    }
}

@media (max-width: 700px) {
    .movie {
        height: 200px;
    }
    
    .hero-section {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
}