@import "settings.breakpoints";
@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/objects.member-feature-promo-grid";
@import "mixins/tools.mixins";

.o-member-feature-promo-grid {
  display: none; // hidden on mobile tier (default)
  margin: 0 auto;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.o-member-feature-promo-grid--rust {
  .o-member-feature-promo-grid__inner {
    background-color: $color-rust-900;
    background-image: linear-gradient(-180deg, #A45037 11%, #412016 59%);
  }

  .o-member-feature-promo-grid__cell {
    // warm cells
    &:nth-of-type(even) {
      .o-member-feature-promo-grid__cell__fade {
        background-image: linear-gradient(-180deg, rgba(118, 51, 11, 0) 11%, #421F14 66%);
      }
    }
    // cold cells
    &:nth-of-type(odd) {
      .o-member-feature-promo-grid__cell__fade {
        background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 11%, #292929 66%);
      }
    }

    &:hover,
    &:focus {
      .o-member-feature-promo-grid__cell__fade {
        background: $color-rust-900;
      }
    }

    &:active {
      .o-member-feature-promo-grid__cell__fade {
        background: $color-red-999;
      }
    }
  }
}

.o-member-feature-promo-grid__inner {
  @include display-grid;
}

.o-member-feature-promo-grid__head,
.o-member-feature-promo-grid__foot {
  opacity: 0.15;
  background: $color-white;
}

.o-member-feature-promo-grid__head {
  @include grid-column(1, 2);
  @include grid-row(1, 2);
}

.o-member-feature-promo-grid__list {
  @include grid-column(2, 3);
  @include grid-row(1, 3);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.o-member-feature-promo-grid__foot {
  @include grid-column(3, 4);
  @include grid-row(2, 3);
}

.o-member-feature-promo-grid__cell {
  display: block;
  position: relative;
  overflow: hidden;
}

.o-member-feature-promo-grid__cell__img,
.o-member-feature-promo-grid__cell__fade {
  position: absolute;
  pointer-events: none;
}

.o-member-feature-promo-grid__cell__img {
  top: 0;
  left: 0;
  width: 100%;
}

.o-member-feature-promo-grid__cell__fade {
  opacity: 0.9;
  // prevent the image from bleeding outside of the fade
  top: -1px;
  left: -1px;
  width: 102%;
  height: 102%;
}

.o-member-feature-promo-grid__cell__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.o-member-feature-promo-grid__cell__title {
  @include font-gm-sans-bold;
  color: $color-white;
  text-transform: uppercase;
  letter-spacing: rem(1);
}

.o-member-feature-promo-grid__cell__desc {
  @include font-gm-sans;
  color: $color-white;
  letter-spacing: rem(0.3);
}

// Scroll indicator icon
.o-member-feature-promo-scroll {
  display: none; // hidden on mobile tier (default)
  margin: rem(20) auto;
  width: rem(40);
  height: rem(25);
}

.o-member-feature-promo-scroll__icon {
  fill: $color-grey-200;
  width: 100%;
  height: 100%;
}
