@use '../colors';
@use '../layout';

.boxes-module {
  padding: layout.$large-gap;
  background-color: colors.$teal-300;

  .content,
  .box {
    &:not(:last-child) {
      margin-bottom: layout.$large-gap;
    }
  }

  .content {
    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }

  .box {
    margin: layout.$large-gap 0;
    padding: layout.$large-gap;
    background: colors.$gray-50;
    @include colors.card-shadow;

    h3 {
      margin: 0;
      text-transform: uppercase;
    }
  }

  @media screen and (min-width: layout.$breakpoint) {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: layout.$large-gap;

    .content,
    .box {
      grid-column: span 3;
      margin: 0;

      &:not(:last-child) {
        margin-bottom: 0;
      }
    }

    .box:not(.first) {
      grid-column: span 2;
    }
  }
}