Template:Mainpage/styles.css

.mainpage-container {
  padding: 1em;
  display: grid;
  grid-gap: 1em;
}

.mainpage-card {
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 1em;
  box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1);
}

.mainpage-card-label {
  width: auto;
  padding: 1em;
  text-align: center;
  font-weight: bold;
}

.mainpage-card-sublabel {
  background: #dfe8f1;
  width: auto;
  padding: 1em;
  text-align: center;
  font-weight: bold;
  font-size: .9em;
}

.mainpage-card-subsection {
  width: auto;
  padding: 1em;
  text-align: center;
  font-size: .9em;
}

@media screen and (min-width: 600px) {
  .mainpage-container {
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1em;
  }

  .mainpage-header {
    grid-row: 1;
    grid-column: span 12;
    text-align: center;
    font-size: 1.5em;
  }

  .mainpage-buttons {
    grid-row: 2;
    grid-column: span 12;
    text-align: center;
  }

  .mainpage-buttons__buttons {
    margin: auto;
    justify-content: center;
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
  }

  .mainpage-buttons button {
    width: 200px;
  }

  .mainpage-events {
    grid-row: 3;
    grid-column: span 8;
  }

  .mainpage-timers {
    grid-row: 3;
    grid-column: span 4;
  }
  
  .mainpage-new-releases {
    grid-row-start: 4;
    grid-row-end: 7;
    grid-column: span 6;
  }
    
  .mainpage-redeem {
    grid-row: 4;
    grid-column: span 3;
  }
  
  .mainpage-links {
    grid-row: 4;
    grid-column: span 3;
  }
  
  .mainpage-calendar {
    grid-row-start: 5;
    grid-row-end: 7;
    grid-column: span 4;
  }
    
  .mainpage-social-media {
    grid-row-start: 5;
    grid-row-end: 7;
    grid-column: span 2;
  }

  .mainpage-getting-started {
    grid-row: 7;
    grid-column: span 3;
  }
  
  .mainpage-navigation {
    grid-row: 7;
    grid-column: span 9;
  }
}