p {max-width: 50vw;}

p, a, ul, h4, h3, h2, h1, input {
    color: black;
    mix-blend-mode: normal;
}


header p, header a {
    color: white;
  }


.divider {
    margin: 1rem 0
}

.header-placeholder {height: calc(6vh);}

.product-text {width: 50%;}

.product-text h1 {font-size: 10.25vw;}

.table-container p {max-width: 33%;}

.price {
    margin: 100px 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 30px;
}


.header-placeholder {margin-bottom: 1rem;}

/* img {width: 100%; height: 100%; object-fit: cover;} */

section {
    height: auto;
    width: auto;
    margin: 3rem 0
}

.gallery {
    width: auto; margin-right: 20px;
    display: grid; gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 20px;
}

.mobile-img {display: none;}

.gallery :nth-child(n) {overflow: hidden; transition: 0.5s; object-fit: cover; width: 100%; height: 100%;}

.gallery :nth-child(n) :hover {scale: 1.05;}

.span-1 {height: 50vh;}

.span-2 {
    grid-column: span 2;
    height: 89vh
}

.loop-image {display: none;}

.choose-color {display: flex; padding-left: 5px;}
.color {width: 30px; height: 30px; border: solid 1px lightgrey; margin-right: 20px;
transition: 0.5s;
cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */}

.color:nth-child(1) {background-color: white; 
    outline: 2px solid rgba(0,0,0,1);
    outline-offset: 3px;}
.color:nth-child(2) {background-color: black;
    outline: 2px solid rgba(0,0,0,0);
    outline-offset: 3px;}


@media only screen and (max-width: 768px) {

    .product {flex-direction: column;}

    .product-text {width: 100%;}

    .product-text h2 { font-size: 20vw; }

    .table-container {justify-content: space-between;}

    .table-container p {width: 45%; max-width: none; flex: none;}

    .footer-table {justify-content: flex-start;}

    .footer-table p {max-width: none; flex: auto;}

    .specs :nth-child(9) :nth-child(1) {display: none;}

    .gallery {margin-right: 0; display: flex; overflow: auto; gap: 0px;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
        }

    .mobile-img {display: block;}
    .desktop-img {display: none;}

    .gallery:-webkit-scrollbar {display: none;}

    .gallery :nth-child(n) {width: 100%; height: 70vh; flex: none; scroll-snap-align: center;
    }

    .loop-image {display: block;}

    img { animation-name: zoomin ; animation-duration: 5s; }

    @keyframes zoomin {
        from {scale: 1;} 
        to {scale: 1.05;}       
    }

}