exadel-inc/esl

@import (reference) '../../common/variables.less';
 
.benefit {
  overflow: hidden;
  position: relative;
  margin-bottom: 2rem;
 
  &-item {
    display: flex;
    flex: 1 0 0px;
    align-items: center;
    margin: 30px 20px;
    list-style: none;
 
    break-inside: avoid-page;
  }
 
  &-container {
    margin: 0 -20px;
    padding-bottom: 100px;
  }
 
  &-icon {
    width: 60px;
    height: 60px;
    margin-right: 30px;
    display: flex;
    align-items: center;
 
    svg {
      height: 60px;
    }
  }
 
  &-content-name {
    margin-bottom: 20px;
    font-size: 1.5rem;
  }
}
 
@media @sm-xl {
  .benefit {
    &-item {
      display: block;
    }
    &-container {
      display: flex;
      flex-wrap: wrap;
    }
    &-icon {
      margin-bottom: 40px;
    }
  }
}
 
@media @sm {
  .benefit-item {
    min-width: 245px;
    max-width: 350px;
  }
}
 
@media @md-lg {
  .benefit {
    &-item {
      min-width: 340px;
      max-width: 500px;
    }
    &-container {
      padding-bottom: 130px;
    }
  }
}
 
@media @xl {
  .benefit {
    &-item {
      min-width: 400px;
      max-width: 500px;
    }
    &-container {
      padding-bottom: 150px;
    }
  }
}