#home-branding {
    & {
        padding-top: clamp(1px, calc(160 / 1920 * 100vw), 160px);
        padding-bottom: clamp(1px, calc(116 / 1920 * 100vw), 116px);
    }

    .home-branding-row {
        margin-top: clamp(1px, calc(112 / 1920 * 100vw), 112px);
    }

    .title {
        font-size: 14px;
        color: var(--g-color-blue);
        margin-bottom: clamp(1px, calc(60 / 1920 * 100vw), 60px);
    }

    .description {
        font-size: 12px;
    }

    .branding-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, auto);
        gap: clamp(1px, calc(80 / 1920 * 100vw), 80px) clamp(1px, calc(100 / 1920 * 100vw), 100px);
    }

    .ico {
        width: 60px;
        border-radius: 50%;
    }

    @media (min-width: 576px) {

        .branding-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, auto);
        }

        .ico {
            width: 80px;
        }
    }

    @media (min-width: 992px) {
        .title {
            font-size: clamp(14px, calc(32 / 1920 * 100vw), 32px);
        }

        .description {
            font-size: clamp(12px, calc(28 / 1920 * 100vw), 28px)
        }

        .ico {
            width: clamp(1px, calc(155 / 1920 * 100vw), 155px);
        }

        .branding-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, auto);
        }
    }

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

    .ico-container {
        padding-right: clamp(1px, calc(48 / 1920 * 100vw), 48px);
    }
}

.branding-pattern-image {
    background-image: url('/_data/styly/swim/waves-template-pink-v2.jpg');
    height: clamp(1px, calc(11 / 1920 * 100vw), 11px);

    background-repeat: repeat-x;
    background-position: top left;
    background-size: contain;
    width: 100%;
}