:root {
    --bs-body-font-size: clamp(16px, 0.975rem + 0.125vw, 18px);
    --bs-line-height: normal;
}

html,
body {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

h2,
.h2 {
    font-size: 1.6em;
    line-height: 1.2em;
}

.bg-dark-to-secondary {
    background: linear-gradient(var(--bs-dark) 5rem, var(--bs-secondary) 5rem);
}

.bg-secondary-to-dark {
    background: linear-gradient(var(--bs-secondary) 5rem, var(--bs-dark) 5rem);
}

.h-3 {
    height: 1em;
}

.img-cover {
    background-position: center;
    background-size: cover;
}

.img-grayscale {
    filter: saturate(0);

    &:hover {
        filter: none;
    }
}

.card .hexagon {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    place-items: center;

    & > svg {
        display: block;

        &:first-child {
            grid-area: 1 / 1 / 4 / 4;
        }

        &:last-child {
            grid-area: 2 / 2 / 3 / 3;
        }
    }

    &.hexagon-left {
        left: 0;
        transform: translate(-50%, 50%);
    }

    &.hexagon-right {
        right: 0;
        transform: translate(50%, 50%);
    }
}

.card-title {
    margin: 0;
}

.contact-form-container {
    position: relative;
    z-index: 0;

    &::before {
        background: url(https://picsum.photos/1920/960?random=1);
        background-size: cover;
        content: "";
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        height: calc(100% - 5rem);
        z-index: -1;
    }

    dl {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
}

.h-1 {
    display: none;
}

#products {
    .hexagon {
        transform: translateY(-50%);
    }

    .card-header {
        height: 6em;
    }

    .card-body {
        min-height: 9.25em;
    }
}

.product,
.member,
.contact {
    &:first-of-type {
        background: var(--bs-dark);
        margin-top: -5rem;
    }
}

#about-us {
    background: var(--bs-dark);

    & > div {
        grid-template-columns: 1fr 0.33em 1fr;
        grid-template-rows: auto repeat(7, 1fr);
        margin-inline: auto;
        max-width: 120rem;

        .hr {
            grid-area: 1 / 2 / 11 / 3;
        }

        & > div:first-of-type {
            grid-area: 1 / 1 / 2 / 2;
        }
        & > div:last-of-type {
            grid-area: 1 / 3 / 2 / 4;
        }
    }

    article {
        aspect-ratio: 1;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2375a6b9' d='M30.85 15.449L23.888 3.532A1.07 1.07 0 0 0 22.964 3H9.036c-.38 0-.73.202-.923.532L1.15 15.45c-.199.34-.199.762 0 1.102l6.964 11.917c.193.33.544.532.923.532h13.928c.38 0 .73-.202.923-.532L30.85 16.55c.199-.34.199-.762 0-1.102'/%3E%3C/svg%3E");
        background-position: center center;
        background-repeat: no-repeat;

        div {
            padding-inline: 7.5em;
            text-align: center;
        }

        &:nth-of-type(1) {
            grid-area: 2 / 1 / 4 / 2;
        }
        &:nth-of-type(2) {
            grid-area: 3 / 3 / 5 / 4;
        }
        &:nth-of-type(3) {
            grid-area: 4 / 1 / 6 / 2;
        }
        &:nth-of-type(4) {
            grid-area: 5 / 3 / 7 / 4;
        }
        &:nth-of-type(5) {
            grid-area: 6 / 1 / 8 / 2;
        }
        &:nth-of-type(6) {
            grid-area: 7 / 3 / 9 / 4;
        }
    }
}

@media screen and (max-width: 1399px) {
    #about-us {
        background: var(--bs-secondary);

        article {
            aspect-ratio: unset;
            background-image: none;

            div {
                padding-inline: 0;
                text-align: left;
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .dropdown-menu.shadow {
        box-shadow: none !important;
    }

    .product .img-cover {
        aspect-ratio: 16 / 9;
        border-radius: 1rem 1rem 0 0 !important;
    }
}