.hero-section {
    --hero-header-height: 72px;

    position: relative;
    min-height: calc(100vh - var(--hero-header-height));
    min-height: calc(100svh - var(--hero-header-height));
    margin-top: var(--hero-header-height);
    padding-top: clamp(16px, 3svh, 24px);
    padding-bottom: clamp(16px, 3svh, 24px);
    background-image: url('https://huggingface.co/spaces/Valeriadesing/hom-interiorismo-elegance-in-every-detail/resolve/main/images/IMG_7820.JPG');
    background-position: center;
    background-size: cover;
}

.hero-section > .container > img {
    width: min(94.34%, 615px);
    max-width: 100%;
    height: auto;
}

.hero-section::before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    content: '';
}

.carousel-track {
    width: 100%;
}

.carousel-slide {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

@media (min-width: 768px) and (max-height: 800px) {
    .hero-section > .container > img {
        width: min(82vw, 540px);
        max-width: 540px;
        margin-bottom: clamp(8px, 2svh, 12px);
    }

    .hero-section h1 {
        margin-bottom: clamp(8px, 2svh, 12px);
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .hero-section h2 {
        margin-bottom: clamp(12px, 2.5svh, 16px);
        font-size: 3.75rem;
        line-height: 1;
    }

    .hero-section > .container > p {
        margin-bottom: clamp(16px, 4svh, 24px);
        font-size: 1.125rem;
        line-height: 1.5;
    }

    .hero-section > .container > a[href='#proyectos'] {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .hero-section {
        padding-top: 12px;
        padding-bottom: 24px;
    }
}