body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
}

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

.maincontent_wrapper {
    padding-top: 0;
}

img{
    width:100%;
}

.my-container{
    max-width:1600px;
    padding:0 3%;
    margin:0 auto;
}

.hero{
    background-image:linear-gradient(to bottom, rgba(255,255,255,.6) 0%, rgba(255,255,255,.8) 100%), url('/imageserver/Reusable/drywall-general23/drywall-hero-bg-min.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom:40px;
    background-position: center;
    /* min-height:100vh; */
}

.layer-bg{
    text-align: center;
    padding-top:4em;
    /* color:#fff; */
}

.layer-2{
    max-width:1400px;
    margin:0 auto;
    padding-top:100px;
    padding-inline:3%;
    text-align: center;
}

.layer-2 img{
    max-width:1200px;
    border-radius:1%;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}

.section2{
    text-align: center;
    background-color: #ececec;
}
.section2-container{
    padding:2em;
}

.section2 img{
    margin-inline:5%;
}

.section2 p{
    margin-block:1em;
}
.my-header{
    /* margin:30px 0; */
    text-align: center;
}

.main-image{
    max-width:500px;
    text-align: center;
    margin-bottom:2em;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}
.main-image2{
    max-width:600px;
    text-align: center;
    margin-bottom:1em;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}

.my-grid{
    display: grid;
    grid-template-columns: repeat(2, 48%);
    text-align: center;
    /* align-items: center; */
    justify-content: center;
}

.flex-group{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap:wrap;
}

.flex-item{
    width:clamp(500px, 32vw, 1000px);
    padding:0 1%;
}

.my-grid p{
    max-width:600px;
    margin:0 auto;
}

ul li{
    list-style-type: none;
}

.material{
    max-width:600px;
    margin-bottom:1em;
    border:1px solid #000;
}

.components{
    text-align: center;
    background-color: #ececec;
    padding:2em;
}
.highlight{
    font-weight:700;
}
@media screen and (max-width:1150px) {
.flex-item{
    width:100%;
}
}
@media screen and (max-width:992px) {
    .my-grid{
        display:block;
    }
    .layer-2{
        padding-top:0;
    }
    #hero{
        background-size: cover;
    }
    #hero1{
        display:none;
    }
    .flex-item{
        text-align: center;
    }
}