h1 {
    font-size: 2.5rem;
}

/* Hero sekce */
.hero {
    position: relative;
    width: 100%;
    margin-block-end: var(--space-xlarge ); /*margin for pills*/
}

.hero__image {
    width: 100%;
}

img.hero__image {
    max-height: 80svh;
}

/* Kategorie pod hero obrázkem */
.pills__wrapper {
    position: absolute;
    bottom: -135px;
    width: inherit;
    padding-inline: 4rem;
}

.pills {
    display: flex;
    justify-content: space-around;
    column-gap: 8rem;
    overflow-x: hidden;
    margin-inline: 1rem;
}

@media (max-width: 1544px) {
    .hero {
        margin-block-end: var(--space-large);
    }

    .pills__wrapper {
        bottom: -85px;
        padding-inline: 0rem;
    }

    .pills {
        column-gap: 0rem;
    }
}

@media (max-width: 1044px) {
    .hero {
        margin-block-end: var(--space-medium);
    }

    .pills__wrapper {
        bottom: -85px;
        padding-inline: 0rem;
    }

    .pills {
        margin-inline: 1rem;
    }
}

@media (max-width: 750px) {
    .hero {
        margin-block-end: var(--space-small);
    }

    .pills__wrapper {
        bottom: -50px;
    }

    .pills {
        column-gap: 1rem;
    }
}

/* Sekce s informacemi */
.info {
    background-color: var(--light-accent);
    color: var(--background);
    padding: var(--gap-large);
    border-radius: 45px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--space-medium);
}

    .info h1 {
        font-weight: 800;
        margin-block-end: var(--gap-small);
    }

    .info h2 {
        font-weight: 500;
        margin-block-end: var(--gap-tiny);
    }

    .info p {
        margin-bottom: 0;
    }

.pics-text__wrapper {
    position: relative;
    display: grid;
    align-items: center;
    grid-row-gap: 6rem;
    color: white;
    margin-block-end: calc(var(--space-xlarge) * 1.5);
}

    .pics-text__wrapper:after {
        z-index: -1000;
        position: absolute;
        background-image: url(/img/splash2.svg);
        content: '';
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        /*opacity: 0.9;*/
        background-size: contain;
        transform: scale(1.75) rotate(197deg);
        bottom: 0px;
        left: -43px;
    }

    .pics-text__wrapper img {
        max-width: 80%;
    }

    .pics-text__wrapper h3 {
        padding-inline: 2rem;
        font-weight: 400;
    }

    .pics-text__wrapper img {
        border-radius: 45px;
    }


@media (max-width: 992px) {
    .pics-text__wrapper:after {
        background-size: contain;
        transform: scale(1.7, 3) rotate(296deg);
        bottom: -49rem;
        left: 759px;
    }

    .info {
        margin-block-end: var(--space-small);
    }

    .pics-text__wrapper {
        display: block;
    }

        .pics-text__wrapper > * {
            margin-block-end: var(--space-tiny);
        }
}

@media (min-width: 2000px) {
    .pics-text__wrapper:after {
        background-size: contain;
        transform: scale(1.45,1.65) rotate(25deg);
        bottom: -140px;
        left: 110px;
    }
}


@media (max-width: 576px) {
    .info {
        margin-block-end: var(--space-small);
    }

    .pics-text__wrapper:after {
        background-size: contain;
        transform: scale(1.8, 3.9) rotate(300deg);
        bottom: -68rem;
        left: 53rem;
    }
}

@media (max-width: 450px) {
    .info {
        margin-block-end: var(--space-tiny);
    }

    .pics-text__wrapper:after {
        background-size: contain;
        transform: scale(1.9, 4) rotate(300deg);
        bottom: -75rem;
        left: 57rem;
    }
}

@media (max-width: 400px) {
    .info {
        margin-block-end: var(--space-tiny);
    }

    .pics-text__wrapper:after {
        background-size: contain;
        transform: scale(2, 4.2) rotate(300deg);
        bottom: -77rem;
        left: 57rem;
    }
}

@media (max-width: 390px) {
    .info {
        margin-block-end: var(--space-tiny);
    }

    .pics-text__wrapper:after {
        background-size: contain;
        transform: scale(2, 4.3) rotate(301deg);
        bottom: -86rem;
        left: 63rem;
    }
}

.pics-text__wrapper * h3 {
    background-color: var(--main-accent);
    border-radius: 123px;
}

@media (max-width: 375px) {
    .info {
        margin-block-end: var(--space-tiny);
    }

    .pics-text__wrapper:after {
        background-size: contain;
        transform: scale(2, 4.3) rotate(299deg);
        bottom: -95rem;
        left: 76rem;
    }

    .pics-text__wrapper * h3 {
        background-color: var(--main-accent);
        border-radius: 45px;
        padding: 2rem;
    }
}

@media (max-width: 324px) {
    .pills__wrapper {
        position: static;
    }

    .pills {
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
    }

    .pill {
        max-width: 7rem;
    }

        .pill img {
            width: 55%;
        }

        .pill h2 {
            font-size: 1rem;
        }

    .hero {
        margin-block-end: calc(var(--space-tiny) / 2);
    }
}

.pic1 {
    display: flex;
    justify-content: center;
    grid-column: 2;
}

.text1 {
    display: inherit;
    grid-row: 1;
}

.pic2 {
    display: flex;
    justify-content: center;
    grid-row: 2;
    grid-column: 1;
}

.text2 {
    display: inherit;
    grid-row-start: 2;
    grid-column-start: 2;
}

.pic3 {
    display: flex;
    justify-content: center;
    grid-row-start: 3;
    grid-column-start: 2;
}

.text3 {
    display: inherit;
    grid-row-start: 3;
    grid-column-start: 1;
}

/*gallery */
.gallery__wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    margin-block-end: var(--space-xlarge);
}

.gallery {
    display: flex;
    justify-content: center;
}

    .gallery img {
        background-size: contain;
        max-width: 90%;
    }

@media (min-width: 992px) {
    .gallery__wrapper {
        display: grid;
        /*
        grid-template-columns: 0.9fr 0.7fr 0.3fr 0.3fr 0.1fr 0.35fr 0.3fr 0.7fr;
        grid-template-rows: 0.1fr 0.6fr 0.2fr 0.1fr;
        grid-template-areas:
            "item1 item2    item5  item5 item5 item5 item6 item6"
            "item1 item4    item5  item5 item5 item5 item6 item6"
            "item1 item4    item5  item5 item5 item5 item7 item7"
            "item8 item8   item3   item3 item3 item3 item7 item7";
        */

        grid-template-columns: 1fr 0.1fr 0.7fr 0.2fr 0.1fr 1.3fr 0.3fr 1fr;
        grid-template-rows: 0.8fr 0.5fr 1fr;
        grid-template-areas:
            "item1 item1 item2 item2 item5  item5 item5 item5"
            "item1 item1 item4 item4 item5  item5 item5 item5"
            "item1 item1 item4 item4 item5  item5 item5 item5"
            "item8 item8 item8 item3 item3  item3 item7 item7";
        gap: 1.2rem;
        margin-inline: 1.2rem;
    }

    .gallery img {
        background-size: contain;
        max-width: 100%;
    }

    .item1 {
        grid-area: item1;
    }

    .item2 {
        grid-area: item2;
    }

    .item3 {
        grid-area: item3;
    }

    .item4 {
        grid-area: item4;
    }

    .item5 {
        grid-area: item5;
    }

    .item6 {
        grid-area: item6;
    }

    .item7 {
        grid-area: item7;
    }

    .item8 {
        grid-area: item8;
    }
}

/*brands*/
.brands__wrapper > * {
    color: white;
}

.brand__top {
    display: flex;
    align-items: flex-end;
    column-gap: 2ch;
}

.brands {
    padding-inline: 12rem;
}

.brand__top__text__wrapper {
}

    .brand__top__text__wrapper h2 {
        font-size: 4rem;
    }

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

.brand__bot__text__wrapper h3 {
    margin-block-end: 4rem;
    font-weight: 400;
}

.brand__bot__text__wrapper h4 {
    font-weight: 100;
}

.brands__wrapper {
    position: relative;
    margin-block-end: calc(var(--space-large) * 3 );
}

.brand__bot img {
    width: 900px
}

.brands::after {
    position: absolute;
    background: url(/img/splash.svg) no-repeat center center;
    content: "";
    z-index: -9999;
    width: inherit;
    height: 1100px;
    background-size: contain;
    background-repeat: no-repeat;
    left: 0px;
    top: -280px;
    background-size: cover;
    align-content: center;
    background-size: 141rem;
}


@media (max-width: 1999px) {
    .brands {
        padding: 0;
    }

    .brand__top__text__wrapper h2 {
        font-size: 3rem;
    }

    .brand__bot__text__wrapper h3 {
        margin-block-end: 3rem;
    }

    .brand__top {
        display: flex;
        align-items: flex-end;
        column-gap: 2ch;
    }

    .brands::after {
        left: 0px;
        top: -280px;
        background-size: 120rem;
    }
}


@media (max-width: 1200px) {
    .brand__bot__text {
        margin-inline-end: 2rem
    }

    .brand__top__text__wrapper h2 {
        font-size: 2.3rem;
    }

    .brand__bot__text__wrapper h3 {
        margin-block-end: 1rem;
    }

    .brand__top {
        display: flex;
        align-items: flex-end;
        column-gap: 2ch;
    }
}

@media (max-width: 991px) {
    .brand__bot__text {
        margin-inline-end: 2rem
    }

    .brand__top__text__wrapper h2 {
        font-size: 2.3rem;
    }

    .brand__bot__text__wrapper h3 {
        margin-block-end: 1rem;
    }

    .brand__top {
        display: flex;
        align-items: flex-end;
        column-gap: 2ch;
    }

        .brand__top img {
            width: 250px;
        }

    .brands::after {
        left: 0px;
        top: -350px;
        background-size: 85rem;
    }
}

@media (max-width: 991px) {
    .brand__bot__text {
        margin-inline-end: 2rem
    }

    .brand__top__text__wrapper h2 {
        font-size: 1.8rem;
    }

    .brand__bot__text__wrapper h3 {
        margin-block-end: 1rem;
        font-size: 1rem;
    }

    .brand__bot__text__wrapper h4 {
        font-size: 0.7rem;
    }

    .brand__top {
        display: flex;
        align-items: flex-end;
        column-gap: 2ch;
    }

        .brand__top img {
            width: 304px;
        }

    .brands::after {
        left: 0px;
        top: -350px;
        background-size: 85rem;
    }
}

@media (max-width: 750px) {
    .brand__top__text__wrapper h2 {
        font-size: 1.2rem;
    }

    .brand__top {
        margin-block-end: var(--gap-small);
    }

        .brand__top img {
            width: 250px;
        }

    .brand__bot__text__wrapper h3 {
        font-size: 0.7rem;
    }

    .brand__bot__text__wrapper h4 {
        font-size: 0.6rem;
    }

    .brands::after {
        left: 0px;
        top: -350px;
        background-size: 85rem;
    }

    .brands {
        padding-inline: 1rem;
    }
}

@media (max-width: 434px) {
    .brands {
        padding-inline: 3rem;
    }

    .brand__top {
        display: flex;
        align-items: flex-start;
        column-gap: 2ch;
        flex-direction: column;
    }

    .brand__bot {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

        .brand__bot img {
            width: 250px;
        }

    .brand__bot__text {
        margin-inline-end: 0;
    }

    .brand__bot__text__wrapper h4 {
        margin-block-end: var(--gap-medium);
    }
}