.square {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.halfheight {
    width: 100%;
    aspect-ratio: 2.05 / 1;
}

.offering {
    background-image: url("../img/what-youll-find.jpg");
    background-position: center center;
    background-size: cover;
}

.vendors {
    background-image: url("../img/vendor-info.jpg");
    background-position: center center;
    background-size: cover;
    overflow:hidden;
}

.faq {
    background-image: url("../img/frequent-questions.jpg");
    background-position: center center;
    background-size: cover;
    overflow:hidden;
}

div.offering > h2 {
    color:#FFFBF0;
    position: relative;
    z-index: 2;
}

div.vendors > h2 {
    color:#FFFBF0;
    position: relative;
    z-index: 3;
}

h2, div.faq  > h2 {
    color:#FFFBF0;
    position: relative;
    z-index: 4;
}

div.offering::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.6s ease;
}

div.vendors::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height:48%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.6s ease;
}

div.faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:48%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.6s ease;
}

div.offering:hover::before, div.faq:hover::before, div.vendors:hover::before {
    opacity: 1;
}

/* Moble styles ================================================== */
@media (max-width:959px) {
    .halfheight {
        aspect-ratio: 1 / 1;
    }
}