style.css

html,
body {
  font-family: Montserrat, serif;
}

h1 {
  font-weight: 700;
  text-align: center;
}

.version-card {
  display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
  border-radius: 15px;
	align-items: center;
	background: #ffffff;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.14),
		0 2px 2px 0 rgba(0, 0, 0, 0.12),
		0 1px 3px 0 rgba(0, 0, 0, 0.20);
}

.version-card > h2 {
  text-align: center;
}

a {
  color: #333333;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 20px;
  grid-template-areas: "M1 M2 M3" "M4 M5 M6" ". M7 .";
  margin: 20px;
}

.M1 { grid-area: M1; }

.M2 { grid-area: M2; }

.M3 { grid-area: M3; }

.M4 { grid-area: M4; }

.M5 { grid-area: M5; }

.M6 { grid-area: M6; }

.M7 { grid-area: M7; }

@media (max-width: 680px) {
  .grid-container {
    display: flex;
    flex-direction: column;
  }

}