@font-face {
    font-family: "Geist-Mono";
    src: url(GeistMono-Bold.woff2);
}


.cs-hero { 
    padding: 30vh .5vw 6vh 2.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cs-title {
    font-family: "Geist-Mono";
    letter-spacing: -3px;
    font-size: 4vw;
    color: #171717;
    margin: 0;
    text-transform: uppercase;
}

.cs-intro-text {
    max-width: 55vw;
}

.cs-intro-text p {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    color: #171717;
}

/* Grid Container */
.cs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    width: 95vw;
    margin-bottom: 30vh;
}

.grid-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Obal obrázku s přizpůsobitelnou výškou */
.cs-img-wrapper {
    overflow: hidden;
    isolation: isolate;
    height: auto; /* Zrušena pevná výška 800px */
    width: 100%;
}

/* Roztáhne obal na 2 sloupce */
.full-width {
    grid-column: span 2;
}

/* Obrázek v původním poměru stran */
.cs-img-wrapper img {
    width: 100%;
    height: auto; /* Zajišťuje zachování originálního poměru stran */
    display: block;
    border-radius: 8px;
    /* object-fit odstraněn */
}

/* Textové bloky */
.cs-text-block {
    grid-column: span 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6vh 0;
    width: 100%;
}



.cs-body-text {
    max-width: 50vw;
}


.cs-cta-space {
    margin-top: 10vh;
    margin-bottom: 10vh;
}

/* Responsivita */
@media (max-width: 750px) {
    .cs-intro-text {
        max-width: 93vw;
    }

    .cs-hero, .cs-text-block {
        flex-direction: column;
        gap: 0vh;
        padding: 14vh 5vw 3vh 5vw;
    }

    .cs-text-block {
        padding: 4vh 2vw; 
    }

    .cs-title { 
        font-size: 45px; 
    }

    .cs-intro-text p, .cs-body-text p { 
        max-width: 100%; 
        font-size: 4.5vw; 
    }

    .cs-text-block h2 { 
        font-size: 4vw; 
    }
        
    .cs-grid {
        grid-template-columns: 1fr;
        width: 90vw;
        gap: 2vh;
    }

    .cs-img-wrapper {
        grid-column: span 1 !important;
        width: 100%;
        height: auto; /* Zrušena pevná výška 800px i pro mobilní zobrazení */
    }
}