@use "../base" as *;
@use "../abstracts" as *;

#block-footer-advantages {
  width: 100%;

  @include breakpoint(extra_large) {
    margin-bottom: 19px;
  }

  .menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;

    @include breakpoint(medium) {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      gap: 12px;
    }

    .menu-item {
      display: flex;
      justify-content: center;
      a, span {
        font-family: $font-primary;
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
        border-radius: 4px;
        transition: all 0.4s;
        text-align: center;
        width: 100%;

        @include breakpoint(medium) {
          font-size: 0.875rem;
          line-height: 1.125rem;
          padding: 16px 24px;
        }

        &:hover {
          background-color: $light-gray;
          transform: translateY(-2px);
        }

        &::before {
          content: "";
          display: inline-block;
          width: 14px;
          height: 14px;
          background-image: url("/assets/icons/check-circle.svg");
          background-repeat: no-repeat;
          background-size: contain;
          margin-right: 6px;

          @include breakpoint(medium) {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }
      }
    }
  }
}