@keyframes slide-in {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 100%;
    }
}


main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 12pt;
}

.product-info-1,
.product-info-2 {
    position: sticky;
    top: 12pt;
    left: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title,
.product-style,
.product-fabric,
.product-size,
.product-color,
.product-availability,
.product-price,
.product-buy {
    padding-top: 12pt;
    padding-bottom: 12pt;
    margin-bottom: 36pt;
    height: auto;
    position: relative;
    overflow: hidden;
    animation:
        slide-in 1s ease-in-out 0s forwards,
        fade-in 0.5s ease-in 0.3s forwards;
}

.product-title::before,
.product-style::before,
.product-fabric::before,
.product-size::before,
.product-color::before,
.product-availability::before,
.product-price::before,
.product-buy::before {
    position: absolute;
    top: -3pt;
    left: 0;
    z-index: 1;
    content: '';
    width: 100%;
    height: 6pt;
    border-left: 1pt solid var(--color-bright);
    border-right: 1pt solid var(--color-bright);
}

.product-title::after,
.product-style::after,
.product-fabric::after,
.product-size::after,
.product-color::after,
.product-availability::after,
.product-price::after,
.product-buy::after {
    position: absolute;
    bottom: -3pt;
    left: 0;
    z-index: 1;
    content: '';
    width: 100%;
    height: 6pt;
    border-left: 1pt solid var(--color-bright);
    border-right: 1pt solid var(--color-bright);
}

.color-squares {
    display: flex;
    gap: 6px;
    margin-top: 0.5rem;
}

.color-square {
    width: 20px;
    height: 20px;
    /* border-radius: 4px; */
    /* border: 1px solid #ccc; */
}

figure {
    margin-bottom: 12pt;
    transition: filter 0.5s ease-in-out;
    will-change: filter;
    transform: scale(1);
}

.product-buy a {
    font-size: 24pt;
}

h1 {
    position: relative;
    border-bottom: 1pt solid var(--color-bright);
    margin-bottom: 6pt;
    padding-bottom: 3pt;
    position: relative;
    font-size: 24pt !important;
}

h1 .label {
    position: absolute;
    /* bottom: 4pt; */
    right: 0;
}

.color-square {
    border: 1pt solid var(--color-bright);
}

@media (max-width: 779px) {
    main {
        grid-template-columns: 1fr;
    }

    .product-info-1,
    .product-info-2 {
        position: relative;
    }

    .product-info-1 {
        order: 2;
    }

    .product-info-2 {
        order: 3;
    }

    .product-images {
        order: 1;
    }
}