/* Homepage */
body { background: #fff; }
.page { width: 885px; max-width: 100%; margin: 28px auto 45px; }
.slideshow-area { width: 885px; max-width: 100%; margin: 24px auto 0; }
#slideshow { position: relative; width: 885px; height: 400px; overflow: hidden; background: #eee; }
#slideshow img { position: absolute; inset: 0; width: 885px; height: 400px; display: block; object-fit: contain; border: 0; opacity: 0; }
#slideshow img.active { z-index: 2; opacity: 1; }
.dots { display: flex; justify-content: center; gap: 9px; margin: 10px 0 17px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #d7d7d7; }
.dot.active { background: #0084c5; }

.discover { display: block; width: 300px; margin: 0 auto; padding: 12px 22px; border-radius: 3px; background: #0084c5; color: #fff; text-align: center; text-decoration: none; font: 16px Arial, Helvetica, sans-serif; line-height: 1.2; transition: opacity .2s ease, transform .2s ease; }

.discover:hover { color: #fff; opacity: .9; transform: translateY(-1px); }

.info-grid { width: 885px; max-width: calc(100% - 24px); margin: 18px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.info-block { min-height: 230px; padding: 20px 24px 22px; color: #fff; text-decoration: none; font-size: 14px; line-height: 1.42; }
.info-block h2 { margin: 0 0 12px; font-size: 24px; font-weight: normal; line-height: 1.15; }
.info-block p { margin: 0; white-space: pre-line; }
.info-block.red { background: #c30e2e; }
.info-block.blue { background: #0084c5; }

.info-wide, 
.info-wide-2,
.info-wide-3 { 
  width: 885px; 
  max-width: calc(100% - 24px); 
  margin: 10px auto 0; 
  padding: 22px 28px; 
  color: #fff; 
  font: 14px Arial, Helvetica, sans-serif;
   line-height: 1.5; }

.info-wide { background: #dc2543; }
.info-wide-2 { background: #1e94a0; }
.info-wide-3 { background: #F37F7F; }

.info-wide h2, .info-wide-2 h2, .info-wide-3 h2 { margin: 0 0 10px; font-size: 24px; font-weight: normal; }
.info-wide p, .info-wide-2 p, .info-wide-3 p { margin: 0; }
.info-wide a, .info-wide-2 a, .info-wide-3 a { color: #fff; text-decoration: none; }

@media (max-width: 760px) {
  .page { margin-top: 0; }
  .slideshow-area { width: 100%; padding: 0 12px; }
  #slideshow { width: 100%; height: auto; aspect-ratio: 885 / 400; }
  #slideshow img { width: 100%; height: 100%; }
  .info-grid { grid-template-columns: 1fr; gap: 12px; }
  .info-wide, .info-wide-2, .info-wide-3 { padding: 18px; }
}