@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.l-grid-home__row {
  display: grid;
  grid-template-columns: rem(10) 1fr rem(10);
  grid-template-areas: "gap-left content gap-right";
  margin-bottom: rem(10);
  width: auto;
  @media (min-width: $break-tablet) {
    max-width: none;
  }
  @media (min-width: $break-tablet-medium) {
    grid-template-columns: 1fr rem(960) 1fr;
    max-width: none;
  }
}

.l-grid-home__row--full {
  grid-column: 1 / -1;
  background-color: #ebc2c2;
  .l-grid-home__row__content {
    background: none;
  }
}

.l-grid-home__row__content {
  grid-area: content;
  background-color: #ebc2c2;
  @media (min-width: $break-tablet) {
    max-width: none;
  }
  @media (min-width: $break-tablet-medium) {
    max-width: none;
  }
}

.l-grid-home__ad-slot {
  background-color: $color-grey-200;
}

.l-grid-home__top-packages {
  .l-grid-home__row__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: rem(10);
    background: none;
    @media (min-width: $break-tablet-medium) {
      grid-template-columns: 1fr 2fr 1fr;
      min-height: rem(300);
    }
  }
  .l-grid-home__package {
    margin-bottom: 0;
    background-color: #ebc2c2;
    padding: rem(20);
  }
}

.l-grid-home__3-columns,
.l-grid-home__2-columns {
  .l-grid-home__row__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: rem(10);
    background: none;
    margin-bottom: 0;
    @media (min-width: $break-tablet-medium) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .l-grid-home__package {
    background-color: #ebc2c2;
    margin-bottom: rem(10);
    @media (min-width: $break-tablet-medium) {
      min-height: rem(300);
      margin-bottom: 0;
    }
  }

  .l-grid-home__ad-slot {
    padding: rem(10);
    background-color: $color-grey-200;
    height: 100%;
  }

  .l-grid-home__ad {
    background-color: #cdb3e6;
    padding: rem(50);
    position: sticky;
    top: 0;
  }
}

.l-grid-home__2-columns {
  .l-grid-home__row__content {
    @media (min-width: $break-tablet-medium) {
      grid-template-columns: 2fr 1fr;
    }
  }
}

.l-grid-home__inverted {
  background: $color-merlot-900;
  color: $color-white;
  .l-grid-home__row__content {
    padding: rem(60) 0;
  }
}
