:root {
  --iwidth: max(290px, 21.5vw);
}

b { font-size: 1.1rem; }

ol { padding-left: 17px; }

p { margin-top: 5px; }

li p { margin-bottom: 0; }

iframe {
  border: none;
  border-radius: 8px;
  padding: 4px;
  background: #f9f9f9;
  width: var(--iwidth);
}

#logo, iframe {
  display: block;
  margin: auto;
}

.grid {
  display: grid;
  gap: 10px;
}

.c li {
  word-break: break-all;
  padding: 3px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slides {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

button {
  width: min(40px, 5vw);
  height: min(40px, 5vw);
  border: 1px solid #333;
  border-radius: min(16px, 4vw);
  background: none;
  cursor: pointer;
  font-size: min(24px, 3vw);
}

.slides img {
  display: none;
  animation-name: fade;
  animation-duration: 1.5s;
  width: max(350px, 30vw);
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media screen {
  @media (orientation: portrait) {
    .b { order: -1; }
  }

  @media (orientation: landscape) {
    @media (width < 1211px) {
      .a { grid-area: left; }

      .b { grid-area: right; }

      .c { grid-area: bottom; }

      .grid {
        grid-template-columns: calc(var(--iwidth) + 16px) 1fr;
        grid-template-areas:
          'left right'
          'bottom right'
      }
    }

    @media (width >= 1211px) {
      .grid { grid-template-columns: calc(var(--iwidth) + 16px) auto auto; }
    }
  }
}