/* ================= PROMO BANNERS ================= */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.promo-grid li {
    margin-bottom: 0;
}

.promo-card {
    position: relative;
    padding: 30px 48px;
    border-radius: 10px;
    overflow: hidden;
    height:100%;
}

.promo-card__inner {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap:10px;
    height:100%;
}
.promo-card__content {
    position: relative;
    z-index: 1;
  width:calc(100% - 347px);
}
.promo-card__photo{
       width: 337px;
    position: relative;
    min-height: 237px;
    z-index: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    & img{
                position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: 50% 50%;
    }
  }


.promo-card--tools::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 10px;
    background: linear-gradient(103deg, rgba(98, 89, 66, 0.80) -16.21%, rgba(22, 21, 19, 0.80) 57.5%);
}

.promo-card--cladding {
   border-radius: 10px;
   z-index:1;
   background: linear-gradient(258deg, #968E5D 7.52%, #554E21 99.76%);
}

.promo-card--cladding .bgimg {
   opacity: 0.05;
   z-index:-1;
}



.promo-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 20px 6px 14px;
    border-radius: var(--radius-default) 0 0 var(--radius-default);
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-brown) 100%);
    font-family: var(--font-body-family);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--black);
    white-space: nowrap;
    margin-bottom: 16px;
        line-height: 1.3;
}

.promo-card__title {
    color: var(--white);
    margin-bottom: 24px;
}
.promo-card--tools .promo-card__photo>img{
    margin-top:-10px;
}
.promo-card--cladding .promo-card__photo>img{
   margin-right:-48px;
    right:0;
}

@media (max-width: 1599.98px){
    .promo-grid{
     gap:30px;
    }
    .promo-card__photo{
        width:280px;
    }
    .promo-card__content{
       width: calc(100% - 290px); 
    }
    .promo-card{
        padding:30px;
    }
}

@media (max-width: 1439.98px){
    .promo-card__photo{
        width:220px;
        min-height:200px;
    }
    .promo-card__content{
       width: calc(100% - 230px); 
    }
    .promo-card--cladding .promo-card__photo>img{
        margin-right: -30px;
    }
    .promo-grid{
        gap:20px;
    }
}

@media (max-width: 1199.98px) {
    
    .promo-badge {
        padding: 4px 18px 4px 12px;
        margin-bottom: 14px;
    }

    .promo-card__title {
        margin-bottom: 20px;
    }

    .promo-card {
        padding:30px;
    }
    .promo-card__inner{
        row-gap:10px;
        align-items:flex-start;
    }
    .promo-card__content {
        width:100%;
        order:2;
        text-align:center;
        justify-content:center;
    }
    .promo-card--tools .promo-card__photo>img{
        margin-top:0;
       
    }
    .promo-card__photo{
        max-width:220px;
        width:100%;
        min-height:auto;
        order:1;
        margin:0 auto;
        & img{
          position: relative;
        }
    }
    .promo-card--cladding .promo-card__photo>img {
        margin-right: 0;
    }
        .promo-grid {
        gap: 14px;
    }
}

@media (max-width: 991.98px) {
    
    .promo-card {
        padding:30px 20px;
    }
    
}

@media (max-width: 767.98px){
    .promo-grid{
            grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .promo-card__inner {
        flex-wrap: nowrap;
    }

    .promo-card__photo {
        max-width: 35%;
    }

    .promo-card__content {
        max-width: 62%;
        min-width: 0;
        text-align:left;
    }
}

@media (max-width: 575.98px) {
    
    .promo-grid {
        gap:10px;
    }
    .promo-card {
        padding:15px;
    
    }
    .promo-card__photo {
        max-width:35%;
    }
    .promo-card__content {
        max-width:calc(100% - (35% + 10px));
    }
    .promo-badge {
        padding: 4px 12px 4px 4px;
        font-size: 10px;
        white-space: normal;
        margin-bottom:6px;
    }

    .promo-card__title {
        font-size: 20px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .promo-card__content .button {
        padding: 10px 16px;
        font-size: 13px;
        gap: 6px;
    }

    .promo-card--cladding::before {
        width: 420px;
        height: 224px;
        left: -28px;
        top: -32px;
    }

   

}