#banners{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,200px);
    gap: 10px;
    background-color: white;
    padding: 10px;
    box-shadow: 0px 1px 2px #dadada;
}
#banners img{
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
}
#banners a:nth-child(1){
    grid-column: 1/3;
    grid-row: 1/3;
    position: relative;
}
#banners a:nth-child(2){
    grid-column: 3/4;
    grid-row: 1/2;
}
#banners a:nth-child(3){
    grid-column: 3/4;
    grid-row: 2/3;
}
/* ---------- FRAME RESPONSIVE --------- */
@media screen and (max-width: 1080px){
    #banners{
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(3,180px);
        padding: 10px;
    }
    #banners a:nth-child(1){
        grid-column: 1/2;
        grid-row: 1/2;
    }
    #banners a:nth-child(2){
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #banners a:nth-child(3){
        grid-column: 1/2;
        grid-row: 3/4;
    }
}
@media screen and (max-width: 900px){}
@media screen and (max-width: 768px){}
@media screen and (max-width: 667px){}
@media screen and (max-width: 575px){}
@media screen and (max-width: 480px){}
@media screen and (max-width: 414px){
    #banners{
        grid-template-rows: repeat(3,110px);
    }
}
@media screen and (max-width: 360px){}
/* ---------- FRAME RESPONSIVE --------- */