#homepage-swim-header {
    & {
        background: white;
    }

    .title-wrapper {
        padding-bottom: clamp(1px, calc(48 / 1920 * 100vw), 48px);
    }

    .homepage-header-wrapper {
        background: var(--g-module-bg-color);
    }
}


.faq-pattern-image {
    background-image: url('/_data/styly/swim/waves-template-grey-v3.png');
    background-repeat: repeat-x;
    background-position: left;
    height: clamp(1px, calc(25 / 1920 * 100vw), 25px);
    width: 100%;
    background-size: contain;
}

#home-samples {

    & {
        padding-top: clamp(1px, calc(112 / 1920 * 100vw), 112px);
        padding-bottom: clamp(1px, calc(125 / 1920 * 100vw), 125px);
    }

    &.mw-1842 {
        max-width: clamp(1px, calc(1605 / 1920 * 100vw), 1605px) !important;
        padding-left: 0;
        padding-right: 0;
    }

    @media (min-width: 992px) {
        &.mw-1842 {
            max-width: clamp(1px, calc(1872 / 1920 * 100vw), 1872px) !important;
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    .home-sample-container {
        column-gap: clamp(1px, calc(35 / 1920 * 100vw), 35px);
        row-gap: clamp(18px, calc(35 / 1920 * 100vw), 35px);
        margin-top: clamp(1px, calc(92 / 1920 * 100vw), 92px);
        justify-content: center;
        flex-direction: column;
    }

    @media (min-width: 992px) {
        .home-sample-container {
            flex-direction: row;
        }
    }

    .sample-item {
        flex: 1 1 100%;
        max-width: 100%;
        padding-top: clamp(1px, calc(120 / 1920 * 100vw), 120px);
        padding-bottom: clamp(1px, calc(115 / 1920 * 100vw), 115px);
        padding-right: 4vw;
        padding-left: 4vw;
        border: 2px solid #f69ab3;
        border-radius: clamp(1px, calc(120 / 1920 * 100vw), 120px);
    }

    @media (min-width: 576px) {
        .sample-item {
            padding-top: clamp(1px, calc(40 / 992 * 100vw), 40px);
            padding-bottom: clamp(1px, calc(35 / 992 * 100vw), 35px);
            padding-right: 10vw;
            padding-left: 10vw;
        }
    }
    @media (min-width: 992px) {
        .sample-item {
            flex: 1 1 30%;
            max-width: 30%;
            padding-top: clamp(1px, calc(120 / 1920 * 100vw), 120px);
            padding-bottom: clamp(1px, calc(115 / 1920 * 100vw), 115px);
            padding-right: clamp(1px, calc(35 / 1920 * 100vw), 35px);
            padding-left: clamp(1px, calc(35 / 1920 * 100vw), 35px);
        }
    }

    @media (min-width: 1300px) {
        .sample-item {
            flex: 1 1 25%;
            max-width: 25%;
        }
    }

    .title {
        position: relative;
        width: 80%;
        max-width: 500px;
        font-size: clamp(18px, calc(34 / 1920 * 100vw), 34px);
        margin-bottom: clamp(1px, calc(40 / 992 * 100vw), 40px);
        color: var(--g-color-locale-1);
    }

    @media (min-width: 992px) {
        .title {
            width: 100%;
            margin-bottom: clamp(1px, calc(118 / 1920 * 100vw), 118px);
        }
    }

    .title::after {
        content: "";
        position: absolute;
        width: calc(100% - clamp(1px, calc(30 / 1920 * 100vw), 30px));
        height: 2px;
        background: black;
        bottom: calc(clamp(1px, calc(6 / 1920 * 100vw), 6px) * (-1));
        left: clamp(1px, calc(15 / 1920 * 100vw), 15px);
    }

    .description {
        font-size: clamp(14px, calc(28 / 1920 * 100vw), 28px);
        line-height: 1.3;
    }

    .button-container {
        padding-top: clamp(1px, calc(40 / 1920 * 100vw), 40px);
    }

    @media (max-width: 991px) {
        .btn-default {
            min-width: clamp(1px, calc(352 / 1920 * 100vw), 352px);
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}

#free-sample-form {

    & {
        padding-top: clamp(24px, calc(70 / 1920 * 100vw), 70px);
        padding-bottom: clamp(24px, calc(80 / 1920 * 100vw), 80px);

    }

    .mw-category {
        max-width: clamp(1px, calc(1605 / 1920 * 100vw), 1605px) !important
    }

    @media (min-width: 992px) {
        .sample-form {
            padding-right: clamp(1px, calc(170 / 1920 * 100vw), 170px);
        }
    }

    .form-group {
        margin-bottom: 0;
    }

    .sample-form label {
        display: block;
        font-size: clamp(14px, calc(24 / 1920 * 100vw), 24px);
        font-family: var(--font-narrow), sans-serif;
        margin-bottom: clamp(1px, calc(4 / 1920 * 100vw), 4px);
    }

    .sample-form .sample-input {
        border-radius: 0;
        border: 2px solid #18a7df; /* modrá linka jako na originálu */
        height: clamp(30px, calc(55 / 1920 * 100vw), 55px);
        padding: .45rem .65rem;
        box-shadow: none;
        font-size: clamp(14px, calc(18 / 1920 * 100vw), 18px);
    }

    .sample-form .sample-input:focus {
        border-color: #18a7df;
        box-shadow: none; /* žádný bootstrap glow */
        outline: 0;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, auto);
        gap: clamp(1px, calc(60 / 1920 * 100vw), 40px) clamp(30px, calc(62 / 1920 * 100vw), 62px);
    }

    @media (min-width: 430px) {
        .form-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 576px) {
        .form-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 992px) {
        .form-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .form-grid-submit {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: clamp(1px, calc(40 / 1920 * 100vw), 40px) clamp(30px, calc(62 / 1920 * 100vw), 62px);
        direction: rtl;
    }

    @media (min-width: 430px) {
        .form-grid-submit {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 576px) {
        .form-grid-submit {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 992px) {
        .form-grid-submit {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .nav-container {
        padding-top: clamp(22px, calc(62 / 1920 * 100vw), 62px);
    }
}