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

// Actions are another module that is present on the home page. It shows a small
// number of CTA-style buttons which lead to different parts of the site.
.page-actions {
  padding: layout.$large-gap;
  background-color: colors.$teal-300;

  > *:not(:last-child) {
    margin-bottom: layout.$large-gap;
  }

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

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

  > a {
    margin: layout.$large-gap 0;
    padding: layout.$large-gap;
    background: colors.$gray-50;
    color: inherit;
    text-decoration: none;
    @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;
    align-items: stretch;

    > * {
      grid-column: span 3;

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

    > a {
      margin: 0;

      &.first {
        transform: translateY(#{-1 * layout.$huge-gap});
      }

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