@import "settings.colors";

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

.l-grid {
  display: table;
}

.l-grid-content,
.l-grid-sidebar {
  display: table-row;
  vertical-align: top;
  @media (min-width: $break-tablet) {
    display: table-cell;
  }
}

.l-grid-content {
  width: 75%;
}

.l-grid-sidebar {
  width: 25%;
}

.c-cards {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .c-card {
    margin: rem(10);
    padding: rem(10) 0;
    flex: 0 0 40%;
    @media (max-width: $break-tablet) {
      flex-basis: 95%;
    }
  }
}

.c-areas {
  display: table;

  .c-content,
  .c-sidebar,
  .c-sidebar2 {
    display: table-row;
  }

  @media (min-width: $break-tablet) {
    .c-content,
    .c-sidebar,
    .c-sidebar2 {
      display: table-cell;
    }
  }
}

// Homepage
.l-grid-home__row {
  display: table;
  margin: 0 auto rem(10);
  width: 100%;
  @media (min-width: $break-tablet) {
    max-width: rem(720);
  }
  @media (min-width: $break-tablet-medium) {
    max-width: rem(960);
  }
}

.l-grid-home__row--full {
  max-width: none;
  background-color: #ebc2c2;
  .l-grid-home__row__content {
    background: none;
  }
}

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

.l-grid-home__row__content {
  width: 100%;
  background-color: #ebc2c2;
  @media (min-width: $break-tablet) {
    max-width: rem(720);
    margin: 0 auto rem(10);
  }
  @media (min-width: $break-tablet-medium) {
    max-width: rem(960);
  }
}

.l-grid-home__top-packages {
  .l-grid-home__row__content {
    display: flex;
    flex-wrap: wrap;
    background: none;
  }
  .l-grid-home__package {
    width: 100%;
    margin-bottom: rem(10);
    background-color: #ebc2c2;
    padding: rem(20) 0;
    @media (min-width: $break-tablet) {
      flex: 0 0 rem(360);
      &:nth-of-type(1) {
        flex: 0 0 rem(720);
      }
    }
    @media (min-width: $break-tablet-medium) {
      flex: 0 0 rem(480);
      &:nth-of-type(1) {
        flex: 0 0 rem(960);
      }
    }
  }
}

.l-grid-home__3-columns,
.l-grid-home__2-columns {
  .l-grid-home__row__content {
    display: flex;
    flex-wrap: wrap;
    background: none;
    width: 100%;
  }

  .l-grid-home__package-col {
    width: 100%;
    @media (min-width: $break-tablet) {
      flex: 0 0 rem(240);
    }
    @media (min-width: $break-tablet-medium) {
      flex: 0 0 rem(320);
    }
  }

  .l-grid-home__package {
    background-color: #ebc2c2;
    margin-bottom: rem(10);
  }

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

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

.l-grid-home__2-columns {
  .l-grid-home__package-col {
    @media (min-width: $break-tablet) {
      flex: 0 0 rem(360);
    }
    @media (min-width: $break-tablet-medium) {
      flex: 0 0 rem(320);
      &:nth-of-type(1) {
        flex: 0 0 rem(640);
      }
    }
  }
}

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