html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 0;
    font-weight: 400;
    font-family: Lato, Arial, Helvetica, sans-serif;
    color:#2b2b2b;
}

#bld-vis {
    display: grid;
    grid-template-areas: "head" "image" "sel" "swatch";

    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
    max-width: 1320px;
    width: 100%;
    margin: auto;
    container-type: size;
    container-name: bld-vis;
    aspect-ratio: 1/1.6;
    font-weight: 400;
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
}

#bld-title h2 {
    font-family: Oswald, Lato, Arial, Helvetica, sans-serif;
    font-size: 3rem;
    color:#2b2b2b;
}

#bld-sel h3 {
    font-family: Oswald, Lato, Arial, Helvetica, sans-serif;
    font-size: 2.1rem;
    color:#2b2b2b;
}

#bld-title p {
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    color:#2b2b2b;
}

@container bld-vis (min-width: 1px) {
    #bld-sel {
        grid-area: sel;

        display: flex;

        justify-content: center;
        align-items: center;

        align-self: flex-start;
        justify-self: center;
        width: 100%;
        margin-top: 2cqw;
    }

    #bld-sel > img {
        width: 10cqw;
        padding-left: 2cqw;
        margin: 1cqw 0;
    }

    #bld-sel > h3 {
        line-height: 1.5;
        margin: 0.3cqh 0;
        padding-bottom: 0.5cqw;
        padding-left: 1.5cqw;
    }

    #bld-sel > span {
        font-size: 4cqw;
        margin-left: auto;
        padding: 1cqw 3cqw;
        border-radius: 5cqw;
        color: #fff;
        background-color: #989898;
    }

    #bld-title {
        grid-area: head;
        align-self: center;
        justify-self: center;
        text-align: center;
    }

    #bld-title p {
    }

    #bld-swatch {
        grid-area: swatch;
        align-self: flex-start;
        justify-self: flex-end;

        display: grid;
        grid-template-columns: repeat(8, 12.5%);

        width: 100%;
        height: 100%;
        gap: 0;
        margin-top: 2cqw;
    }

    #bld-swatch div {
        width: 100%;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    #bld-swatch div img {
        width: 75%;
        height: 75%;
        object-fit: contain;
    }

    #bld-img {
        grid-area: image;
        align-self: flex-start;
        justify-self: flex-start;
        position: relative;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently */
    }

    #bld-img img {
        max-width: 100%;
        object-fit: cover;
        width: 100%;
        height: auto;;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently */
    }

    #bld-left {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 7cqw;
        height: 7cqw;

        background-image: url(./angle-left-solid-full.svg);
        opacity: 0.7;
        background-size: contain;
    }
    #bld-right {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 7cqw;
        height: 7cqw;
        background-image: url(./angle-right-solid-full.svg);
        opacity: 0.7;
        background-size: contain;
    }
}

@media (min-width: 800px) {
    #bld-vis {
        display: grid;
        grid-template-areas: "head head" "sel image" "swatch image";
        grid-template-columns: 25% 75%;
        grid-auto-rows: auto;
        max-width: 1320px;
        width: 100%;
        margin: auto;
        container-type: size;
        container-name: bld-vis;
        aspect-ratio: 1.7/1;

        font-family: Arial, Helvetica, sans-serif;
    }

    #bld-img img {
        padding-left: 3cqw;
        box-sizing: border-box;
    }
    #bld-swatch {
        grid-area: swatch;
        align-self: flex-start;
        justify-self: flex-start;

        display: grid;
        grid-template-columns: repeat(5, 20%);

        width: 100%;
        height: 100%;
        gap: 0;
        margin-top: 0;
    }
    #bld-sel {
        align-self: flex-start;
        justify-self: flex-start;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        align-self: flex-start;
        justify-self: center;
        width: 100%;
        margin-top: 0;
    }

    #bld-sel > img {
        width: 7.5cqh;
        padding-left: 0;

        margin: 0;
    }

    #bld-sel > h3 {
        line-height: 1.5;
        margin: 1cqh 0;
        padding-bottom: 0.1cqh;
    }

    #bld-sel > span {
        margin-left: 0;
        padding: 0.5cqw 1cqw;
        border-radius: 5cqw;
        color: #fff;
        background-color: #989898;
    }

    #bld-title {
        text-align: center;

        padding-bottom: 2cqw;
    }

    #bld-title p {
    }
    #bld-left {
        left: 3cqw;
    }
}