@use "00-base/configure" as *;

.ma__suggested-pages {

  &.guide {
    text-align: center;

    .ma__suggested-pages__title {
      display: block;

      &:after {
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .ma__suggested-pages__items {
      justify-content: center;
    }
  }

  &__container {

    @include ma-container;
    border-bottom: 2px solid;
    padding-bottom: 50px;
  }

  &__title {

    @include ma-border-decorative;
    margin-bottom: 45px;
    padding-top: 60px;
    padding-bottom: 16px;
    display: inline-block;

    &:after {
      left: 0.075em;
    }
  }

  h3.ma__comp-heading {
    margin-bottom: 0;

    &:after {
      content: none;
    }
  }

  &__items {

    @include clearfix;
    display: flex;
    flex-wrap: wrap;
  }

  &__item {
    margin-bottom: 30px;
    width: 100%;
  }

  &__item--guide {

    @media (min-width: 750px) and ($bp-x-large-max) {

      @include span-columns(4 of 8);

      @include omega(2n);
    }

    @media ($bp-x-large-min) {

      @include span-columns(4);

      @include omega(3n);
    }
  }

  .ma__link-list {
    text-align: left;
  }

  &__item {

    a {
      height: 100%;
      width: 100%;
    }

    &--suggested {

      .ma__decorative-link {
        display: block;
        font-size: $fonts-larger;
        line-height: 1.2;
        margin-top: 10px;
      }

      @media ($bp-x-large-min) {

        @include span-columns(4 of 13);

        @include omega(2n);
        margin-right: 0;
        border-right: 1px solid $c-bd-divider;

        &-figure {
          max-width: 230px;
          margin: auto;
        }

        &:nth-child(2):not(:nth-last-child(3n+1)) {

          @include span-columns(5 of 13);

          @include omega(2n);
          margin-right: 0;
        }

        &:nth-child(1) {

          .ma__suggested-pages__item--suggested-figure {
            margin-left: 0;
          }
        }

        &:nth-last-child(3n+1) {
          border-right: 0;

          .ma__suggested-pages__item--suggested-figure {
            margin-right: 0;
          }
        }
      }

      @media (min-width: 750px) and ($bp-x-large-max) {

        @include span-columns(4 of 8);

        @include omega(2n);
      }
    }
  }
}

//theme

.ma__suggested-pages {
  background-color: $c-bg-section;

  &__container {
    border-color: $c-bd-divider;
  }

  &__title {

    @include ma-border-decorative($c-primary-alt);
  }

  @media ($bp-large-min) {

    &__item + &__item {
      border-color: $c-bd-divider;
    }
  }
}