.maincontent {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
}

.isc-image {
flex-basis: 800px;
}

/**** Product Selection Button ****/

#product-buttons {
display: grid;
grid-template-columns: repeat(6, 1fr);
justify-content: center;
gap: 12px;
margin-inline: auto;
list-style: none;
padding-block: 20px;
text-align: center;
}


.content-asphalt,
 .content-flat,
 .content-tile,
 .content-metal,
 .content-cedar,
 .content-copper { 
display: none;
margin-inline: auto;
padding: 25px 10px;
}

.show { 
display: block; 
}

#product-buttons button  {
    background: #7d0f02;
    border: 3px solid #dedede;
    width: 200px;
    color: #ffffff;
    font-weight: 600;
    padding: 15px 5px;
    border-radius: 15px;
    }
    
    #product-buttons button:hover  {
    background: #ffffff;
    color: #000000;
    }

    
    #active-btn {
        background-color: #ffffff!important;
        color: #000000!important;
        }

.products-list {
display: flex;
flex-flow: row wrap;
gap: 15px;
justify-content: space-around;
padding: 20px 10px;
}

.product-catalog {
transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
text-align: center;
margin-inline: auto;
}

.product-catalog a {
text-align: center;
color: #5b5b5b;
text-decoration: none;
}

.product-catalog a p {
font-weight: 600;
font-size: 1.1rem;
}

.product-caption {
text-align: center;
margin-inline: auto;
color: #444444;
font-size: 20px;
}
.product-catalog a img{
width: 250px;
height: 250px;
margin-inline: auto;
}

.product-catalog:hover a {
transform: translateY(-6px);
color: var(--accent-color);
}
.product-catalog:hover img {
box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
transform: translateY(-6px);
}

.product-text {
display: flex;
flex-flow: row wrap;
gap: 20px;
justify-content: space-around;
}

/****** Media Queries ****/

@media (max-width: 1360px) {
#product-buttons {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media (max-width: 720px) {
#product-buttons {
grid-template-columns: 1fr 1fr;
}

#product-buttons li {
max-width: 95%;
width: 100%;
}

}

@media (max-width: 420px) {
#product-buttons {
grid-template-columns: 1fr;
}