@import './assets/styles/global.scss';

.resources-wrap {
  padding: calculateRem(40) 0 calculateRem(60);

  @media (min-width: $desktop) {
    padding-top: calculateRem(80);
  }

  h2 {
    margin-bottom: calculateRem(24);

    @media (min-width: $tablet) {
      text-align: center;
    }
  }

  .container {
    max-width: calculateRem($big-container-width);
  }
}

.wordclouds-wrap {
  display: grid;
  grid-gap: calculateRem(24);
  grid-template-columns: repeat(1fr);

  @media (min-width: $tablet) {
    grid-gap: calculateRem(16);
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: $tablet) {
    grid-gap: calculateRem(28);
  }
}