#main-container{
    background:url("../images/machinery.jpeg"), #999;
    background-blend-mode:multiply;
    background-size:cover;
    background-position:center;
    width:calc(100vw - 240px);
    height:384px;
    margin: 0 48px 48px;
    padding:64px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
}

#main-container > div{
    width:calc(100% - 64px);
    height:256px;
    padding:64px;
    background:rgba(255, 255, 255, 0.9);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:center;
    box-shadow:0 0 24px 0 #444;
    gap:18px;
}

#main-container > div > h1{
    margin:0;
    font-size:36px;
    line-height:39px;
}

#main-container > div > p{
    margin:0;
    font-size:14px;
    line-height:18px;

}

#request-quote-btn{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    padding:18px;
    gap:24px;
    background:var(--accent-color);
    text-decoration:none;
    cursor:pointer;
}

#request-quote-btn > p{
    margin:0;
    color:white;
    font-weight:700;
}

#request-quote-btn > img{
    height:18px;
    filter:invert(1);
}

.product-showcase:nth-child(even){
    background:white;
    flex-direction:row;
}

.product-showcase:nth-child(odd){
    background:var(--light-accent);
    flex-direction:row-reverse;
}

.product-showcase{
    padding:64px 0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5vw;
}

.product-showcase > div{
    width:40vw;
    display:flex;
    position:relative;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:24px;
}

.product-showcase > div:first-of-type{
    height:512px;
}

.product-showcase > div:first-of-type > div:first-of-type{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    opacity:0.75;
}

.product-showcase > div:first-of-type > div:last-of-type{
    position:absolute;
    z-index:1;
}

.product-showcase > div:last-of-type{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:24px;
}

.product-showcase > div:last-of-type > div{
    height:170px;
    width:256px;
    position:relative;
    background:white;
    border:1px solid var(--border-color);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.product-showcase > div:last-of-type > div > img{
    position:absolute;
    transition-duration:250ms;
    height:192px;
}

.product-showcase > div:last-of-type > div:hover > img{
    height:128px;
}

.product-showcase > div:last-of-type > div:hover > div{
    visibility:visible;
    opacity:1;
}

.product-showcase > div:last-of-type > div > div{
    position:absolute;
    background:rgba(255,255,255,0.5);
    width:calc(100% - 48px);
    height:calc(100% - 48px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition-duration:250ms;
    opacity:0;
    visibility:hidden;
    padding:24px;
    gap:12px;
}

.product-showcase > div:last-of-type > div > div > h1{
    font-size:14px;
    margin:0;
}

.product-showcase > div:last-of-type > div > div > a{
    color:white;
    background:var(--accent-color);
    border:none;
    outline:none;
    cursor:pointer;
    width:100%;
    padding:6px 0;
    font-weight:600;
    text-decoration:none;
}