{% import "../tools/_breakpoints.css" as utils %}

.benefits__listing {
    max-width: var(--content-max-width);
    margin-inline: auto;
}

.benefit {
    display: flex;
    gap: var(--space-s);
}


.benefit__icon {
    max-width: 100px;
    flex-basis: 15%;
    position: relative;
}


.benefit__icon i {
    font-size: var(--fs-4);
    transform: translateX(-50%);
    left: 0%!important;
    position: absolute;
      top: 15px;
  z-index:3;
}

.icon-background {
    /*position: absolute;
    top: 0;
    z-index: -1;*/
  
      position: absolute;
    top: -7px!important;
    
    max-width: 80px;
        left: -45px;
}



.benefit__content {
    flex-basis: 125%;
}

.benefit__content h3 {
    font-size: var(--fs-1);
    margin-top: var(--space-2xs);
    font-family: Inter;
    font-weight: bold;
}

.benefit__content p {
    font-weight: var(--fw-medium);
}
.benefits__listing {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl) var(--space-2xl);
    }
{% call utils.medium_large_and_extra_large() %}
    
 


{% endcall %}

{% call utils.small_and_medium() %}
    

{% endcall %}

{% call utils.small() %}
    .benefit__content h3 {
        margin-top: 0;
      padding-right: 10px;
    }

    
{% endcall %}
@media (max-width: 430px) {
.benefits__listing {
        display: inline-block;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
  }
.benefit__icon i {
        font-size: var(--fs-5);
    }
  .benefit {
  
    margin-bottom: 20px;
}