input[type=radio] {display: none;}

.categories {
    display: flex;
    text-align: center;
    margin:3em auto;
    justify-content: space-between;
    width: 100%;
    max-width: 40em;}

.categories label, .categories a {
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    font-size: .875em;
    font-weight: 900;
    color: hsl(0, 0%, 30%);
    letter-spacing: .075em;
    cursor: pointer;}
.categories a {color:var(--gold-color)}
.categories label::after, .categories a::after {
    	content:"";
        position: absolute;
        bottom:-.5em; left:0; right:0;
        width:100%;
        height:2px;
        background:var(--gold-color);
        opacity: 0;
        transform: scale(0);
        transition: transform .35s ease, opacity .35s ease;
}

#category_1:checked ~ .categories .category_1, 
#category_2:checked ~ .categories .category_2, 
#category_3:checked ~ .categories .category_3, 
#category_4:checked ~ .categories .category_4,
#category_5:checked ~ .categories .category_5{
    pointer-events: none;
}


#category_1:checked ~ .categories .category_1::after, 
#category_2:checked ~ .categories .category_2::after, 
#category_3:checked ~ .categories .category_3::after, 
#category_4:checked ~ .categories .category_4::after,
#category_5:checked ~ .categories .category_5::after{
    opacity: 1;
    transform:scale(1);
}

.offers {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-wrap: wrap;
    height:0;
    width: 0;
    position: absolute;
    left:0; right:0;
    gap:1em;
    transform:translate3d(0,2em,0);
    transition:opacity .35s cubic-bezier(0,0,0.3,1), visibility .35s cubic-bezier(0,0,0.3,1), transform .5s ease;
}
#offers h1 {
    margin:0 auto 1.25em
}
.offers img {
    object-fit: cover;
    width:100%;
    height: auto;
    min-height:20em;
    transition: transform .35s cubic-bezier(0,0,0.3,1);
}
.offers figure {
    position: relative;
    text-align: center;
    overflow: hidden;
}
.offers figure::after {
    opacity: 0;
    content:"";
    position: absolute;
    left:0; top:0;
    height:100%;
    width:100%;
    background:black;
    transition: opacity .35s cubic-bezier(0,0,0.3,1);
}
.offers figcaption {
    z-index: 2;
    position: absolute;
    top: 50%; left:0; right: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.175em;
    font-weight: 800;
    color:white;
    transform: translate3d(0,-50%,0);
}
.offers a {
    flex-basis:calc(33.33% - .67em)
}
.offers a.wide, .offers a.wide {
    flex-basis:calc(50% - .5em);
}
.offers a:hover img {
    transform:scale(1.15);
}
.offers a:hover figure::after {
    opacity: .25;
}


#category_1:checked ~ .offers.category_1, 
#category_2:checked ~ .offers.category_2, 
#category_3:checked ~ .offers.category_3, 
#category_4:checked ~ .offers.category_4,
#category_5:checked ~ .offers.category_5{
    opacity: 1;
    visibility: visible;
    position: relative;
    transform:none;
    height:100%;
    width: 100%;
}



@media only screen and (max-width: 64rem) {
    #offers .container {
        padding: calc(2.5vw + 4em) 1.5em;
    }
    .offers figure::after {
        opacity: .25;
    }
}
@media only screen and (max-width: 48rem){
    .offers a, .offers a.wide  {
        flex-basis:calc(50% - .5em);
    }
    .offers a:last-child {
        flex-basis:100%;
    }
}
@media only screen and (max-width: 40rem) {
    .categories {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;}
    .categories label, .categories a {
        flex:none;
        width:calc(50% - .25em);
        padding: 1.325em 1em;
        font-size: .825rem;
        margin-bottom:.5em; 
        color:hsl(40, 10%, 57%);
        background-color:hsl(40, 20%, 95%);
        transition: color .35s cubic-bezier(0,0,0.3,1), background-color .35s cubic-bezier(0,0,0.3,1);
    }
    .categories a {
        background-color: transparent;
        color: var(--gold-color);
        border: 2px solid;
    }
    #category_1:checked ~ .categories .category_1, 
    #category_2:checked ~ .categories .category_2, 
    #category_3:checked ~ .categories .category_3, 
    #category_4:checked ~ .categories .category_4,
    #category_5:checked ~ .categories .category_5 {
        background:var(--gold-color);
        color:white
    }
    .categories label::after, .categories a::after {display:none}
    .offers img {min-height: 14em;}
    .offers a, .offers a.wide  {
        flex-basis:100%;
    }
}
@media only screen and (max-width: 28.75rem) {
    .categories label, .categories a {width:100%}
    .categories {flex-direction: column-reverse;}

}