body { 
  font-family: sans-serif; 
  margin: 2em;
}

/* https://www.w3schools.com/css/css_grid.asp */
.grid {
  display: flex;
  /* display: grid; */
  /* grid-template-columns: min-content auto auto; */
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1em;
}

.grid > div {
  padding: 1em;
  flex: 1 1 180px;
  min-width: 0;
}

h1, h2 {
  overflow-wrap: break-word;
}

ul {
  margin: 0px;
  margin-bottom: 1em;
}

p {
  margin: 0px;
  margin-bottom: 1em;
}


.border {
  border: 1px solid #666; 
  border-radius: 8px;
  filter: drop-shadow(8px 8px 10px gray);
}

.block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 20px;
}

img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 480px) {
  body {
    margin: 1em;
  }
}

.color1 {
  background-color: #fde89e;
}

.color2 {
  background-color: #baf1c2;
}

.color3 {
  background-color: #a8daf3;
}