@import "variables";
.field-rates {
  width: 100%;
  ul.wrapper-list-rate {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-column-gap: @margin-base-block-small;
    grid-row-gap: @margin-base-block-small;
    grid-template-columns: 1fr 1fr;
    @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  .wrapper-rate {
    position: relative;
    cursor: pointer;
    border: @border;
    padding: 3px;
    border-radius: @border-radius-base;
    .rate {
      padding-left: @padding-block-button;
      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) {
        padding-left: @padding-block-md-horizontal;
      }
      span {
        font-size: @font-size-base;
        color: @text-color-1;
      }
    }
    .selected {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
      color: @background-color-pink;
      i {
        font-size: @font-size-base;
      }
    }
  }
}