/*==================================================
    TIPA MART
    PROMOTIONAL BANNERS
    GROGIN HOME 1 STYLE
==================================================*/

.promo-banners{

    width:100%;

    padding:0 0 55px;

    background:#ffffff;

}


/*==================================================
    CONTAINER
==================================================*/

.promo-banners .container{

    background:#ffffff;

}


/*==================================================
    THREE COLUMN GRID
==================================================*/

.promo-banners__grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    background:#ffffff;

}


/*==================================================
    PROMO BANNER
==================================================*/

.promo-banner{

    position:relative;

    display:block;

    width:100%;

    height:230px;

    overflow:hidden;

    border-radius:8px;

    text-decoration:none;

    background:transparent;

}


/*==================================================
    IMAGE
==================================================*/

.promo-banner img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;

}


.promo-banner:hover img{

    transform:scale(1.05);

}


/*==================================================
    NO OVERLAY
==================================================*/

.promo-banner__overlay{

    display:none;

}


/*==================================================
    CONTENT
==================================================*/

.promo-banner__content{

    position:absolute;

    left:28px;

    top:50%;

    transform:translateY(-50%);

    z-index:2;

    max-width:75%;

}


/*==================================================
    LABEL
==================================================*/

.promo-banner__label{

    display:block;

    margin-bottom:8px;

    color:#082C6C;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/*==================================================
    TITLE
==================================================*/

.promo-banner__title{

    margin:0 0 8px;

    color:#082C6C;

    font-size:26px;

    font-weight:800;

    line-height:1.2;

}


/*==================================================
    TEXT
==================================================*/

.promo-banner__text{

    margin:0 0 18px;

    color:#082C6C;

    font-size:14px;

    line-height:1.5;

}


/*==================================================
    BUTTON
==================================================*/

.promo-banner__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:36px;

    padding:0 16px;

    border-radius:4px;

    background:#F5B51D;

    color:#082C6C;

    font-size:11px;

    font-weight:800;

    letter-spacing:.3px;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease;

}


.promo-banner:hover .promo-banner__button{

    background:#082C6C;

    color:#ffffff;

    transform:translateY(-2px);

}


/*==================================================
    LARGE TABLET
==================================================*/

@media (max-width:1200px){

    .promo-banners{

        padding-bottom:50px;

    }

    .promo-banners__grid{

        gap:16px;

    }

    .promo-banner{

        height:210px;

    }

    .promo-banner__content{

        left:22px;

        max-width:80%;

    }

    .promo-banner__title{

        font-size:22px;

    }

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .promo-banners{

        padding-bottom:45px;

    }

    .promo-banners__grid{

        gap:14px;

    }

    .promo-banner{

        height:190px;

    }

    .promo-banner__content{

        left:18px;

        max-width:85%;

    }

    .promo-banner__title{

        font-size:19px;

    }

    .promo-banner__text{

        font-size:12px;

        margin-bottom:14px;

    }

    .promo-banner__button{

        min-height:33px;

        padding:0 12px;

        font-size:10px;

    }

}


/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    .promo-banners{

        padding-bottom:40px;

    }

    .promo-banners__grid{

        grid-template-columns:1fr;

        gap:14px;

    }

    .promo-banner{

        height:210px;

    }

    .promo-banner__content{

        left:25px;

    }

    .promo-banner__title{

        font-size:24px;

    }

    .promo-banner__text{

        font-size:13px;

    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .promo-banners{

        padding-bottom:35px;

    }

    .promo-banner{

        height:190px;

    }

    .promo-banner__content{

        left:20px;

    }

    .promo-banner__title{

        font-size:21px;

    }

}


/*==================================================
    VERY SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .promo-banner{

        height:180px;

    }

    .promo-banner__content{

        left:17px;

    }

    .promo-banner__label{

        font-size:10px;

    }

    .promo-banner__title{

        font-size:19px;

    }

    .promo-banner__text{

        font-size:12px;

    }

}