.uvod {min-height: 15rem; flex-grow: 1; padding-top: 5rem;}
section{margin: 8rem 1rem 0 1rem;}
h1 {margin-top: 5rem;}

.cards {display: grid; gap: 2rem;}

.gallery {
    display: flex;
    gap: 1rem;
    grid-template-rows: 1;
    overflow-x: scroll;
    white-space: nowrap;
    margin: 0 1rem 1rem 1rem;
}
.gItem__img {min-width: 300px; height: 100%;}

.card__container {container-type: inline-size;}

@media (min-width: 700px) {
    .uvod {background-image: url(../img/bg.webp); min-height: 22rem; max-height: 50rem; height: minmax(20rem, 50rem);}
    
    h1 {font-size: 5rem;}

    section{margin: 8rem 3rem 0 3rem;}

    .icons {flex-direction: row; justify-content: center;}

    .cards { grid-template-columns: 1fr;}

    .gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow-x: unset;
        margin: 0 3rem 1rem 3rem;
    }
    .gItem {overflow: hidden;}
    .gItem__img {transition: 0.5s;}
    .gItem__link:hover .gItem__img {transform: scale(1.09);transition: 1s;}
    .gallery:has(.gItem__link:hover) .gItem__img {filter: blur(12px);}
    .gallery .gItem__link:hover .gItem__img {filter: blur(0);}
    .gItem--3 {grid-column: 1 / span 2; grid-row: 2 / span 2;}
    .gItem--6 {grid-column: 1 / span 2; grid-row: 5 / span 2;}

    form {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }
    .kontakt__wrapper {flex-grow: 1;}
    .kontakt__input {flex-grow: 2;}
    .kontakt__text--zprava {display: block; height: 100%;}
    
}

@media (min-width: 1200px) {

    main{height: calc(100vh - 85px);}
    .uvod {padding-top: 15rem;}

    .cards {grid-template-columns: 1fr 1fr;}
    
    .story {
        display: flex;
        align-items: center;
    }
    .story__wrapper {
        flex-grow: 2;
        flex-basis: 500px;
    }
    .story__img {
        position: unset;
        width: 100%;
        transform: none;
    }
    .story__text {
        padding-left: 2rem;
        flex-grow: 3;
        flex-basis: 400px;
    }

    #formular {margin: 8rem 8rem 0 8rem;}

    .gallery {grid-template-columns: 1fr 1fr 1fr; margin: 0 8rem 1rem 8rem;}
    .gItem--2 {grid-column: 1 / span 2; grid-row: 2 / span 2;}
    .gItem--3 {grid-column: unset; grid-row: unset;}
    .gItem--6 {grid-column: unset; grid-row: unset;}
    
}

@container (min-width: 650px) {
    .card {display: flex; gap: 1.5rem; align-items: center;}
    .card__img {max-width: 380px; flex-grow: 1; height: 100%;}
    .card__text {flex-grow: 2;}
}