.mi-hero-area {
    --animatio_time: 0.3s;
    --padding-block: 70px;
    --font-size: 3rem;
    background-image: url("../mi-img/new-hero-image-bg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 20% bottom;
    background-size: cover;
}

.mi-hero-overlay {
    padding-block: var(--padding-block);
    /* backdrop-filter: blur(3px); */
    /* height: calc(100dvh - calc(71px + 52px)); */
    background: linear-gradient(transparent, hsla(0, 0%, 0%, 0.9));
}
.hero-text {
    margin-inline: auto;
    font-size: var(--font-size);
    line-height: calc(var(--font-size) + 0.5rem);
    text-transform: uppercase;
    font-weight: 500;
}

@media (width >= 768px) {
    .mi-hero-area {
        --padding-block: 150px;
        --font-size: 5rem;
        background-position: left bottom;
    }
}

[class*="mi-anim-"] {
    opacity: 0;
    transform: translateY(20px);
}
.mi-anim-1 {
    text-transform: uppercase;
    line-height: var(--font-size);
    font-size: var(--font-size);
    animation: fadeinup var(--animatio_time) forwards;
}
.mi-anim-2 {
    text-transform: uppercase;
    line-height: var(--font-size);
    font-size: var(--font-size);
    color: var(--mi-color-primary, #e5c104);
    animation: fadeinup var(--animatio_time) forwards
        calc(var(--animatio_time) * 1);
}
.mi-anim-3 {
    animation: fadeinup var(--animatio_time) forwards
        calc(var(--animatio_time) * 2);
}
.mi-anim-4 {
    animation: fadeinup var(--animatio_time) forwards
        calc(var(--animatio_time) * 3);
}
.mi-anim-5 {
    animation: fadeinup var(--animatio_time) forwards
        calc(var(--animatio_time) * 4);
}
.mi-anim-6 {
    animation: fadeinup var(--animatio_time) forwards
        calc(var(--animatio_time) * 5);
}
@keyframes fadeinup {
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.iframe-map {
    min-height: 300px;
    width: 100%;
}
@media (width >=768px) {
    .iframe-map {
        height: 100%;
    }
}

.grid-container {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 5px;
}
@media (width >= 576px) {
    .grid-container {
        gap: 10px;
    }
}
.box {
    background-color: #f8f3eb;
}

.box1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.box2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.box3 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

.box4 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}