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;
  text-align: center;
  font-weight: bold;
}

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

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

.mainpage-events,
.mainpage-timers,
.mainpage-redeem,
.mainpage-calendar, 
.mainpage-new-releases,
.mainpage-social-media,
.mainpage-getting-started {
	text-align: center;
}

.mainpage-new-releases-pool {
	display: flex;	
	justify-content: center;
	flex-wrap: wrap;
}

.mainpage-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.mainpage-stats-section {
	text-align: center;
}

.mainpage-stats-section__stat {
	font-size: 3em;
}

.mainpage-stats-section__stat-label {
	font-size: 0.9em;
}

.mainpage-navigation-col-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

@media screen and (min-width: 768px) {
  .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-new-releases {
    grid-row-start: 3;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 7;
  }
  
  .mainpage-redeem {
    grid-row: 5;
    grid-column: span 8;
  }

  .mainpage-timers {
    grid-row: 3;
    grid-column: span 6;
    font-size: 0.9em;	
  }
  
  .mainpage-calendar {
    grid-row: 4;
    grid-column: span 6;
  }
  
  .mainpage-events {
    grid-row-start: 6;
    grid-row-end: 9;
    grid-column: span 8;
  }
  
  .mainpage-getting-started {
    grid-row-start: 5;
    grid-row-end: 7;
    grid-column: span 4;
  }
  
  .mainpage-social-media {
  	grid-row-start: 7;
  	grid-row-end: 9;
    grid-column: span 4;
  }
  
  .mainpage-navigation {
    grid-row: 9;
    grid-column: span 12;
  }
  
  .mainpage-navigation-col-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
  }
}