.carousel {
      position: relative;
    }

    .carousel-viewport {
      position: relative;
      overflow: hidden;
      border-radius: 0.5rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      /*aspect-ratio: 5/2;*/
    }

    .carousel-track {
      display: flex;
      height: 100%;
    }

    .carousel-slide {
      min-width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
	  /*
      font-size: 2.5rem;
      font-weight: bold;
      color: white;
	  */
    }

    /*
	.slide-1 { background: #dc2626; }
    .slide-2 { background: #2563eb; }
    .slide-3 { background: #16a34a; }
    .slide-4 { background: #9333ea; }
	*/

    .carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-top:0.5rem;
    }

    .carousel-btn {
      width: 5vw;
      height: 4vw;
      border: none;
	  /*
      border-radius: 50%;
      background: #1f2937;
	  */
	  background:none;
      color:#9c1152;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .carousel-btn:hover i {
      color:#00566b;
    }

    .carousel-btn:focus {
		color:#00566b;
		/*
      outline: none;
      box-shadow: 0 0 0 3px #3b82f6;*/
    }
/*
    .carousel-btn svg {
      width: 24px;
      height: 24px;
    }
*/
    .carousel-btn i {
      font-size:3.5vw;
    }

    .carousel-indicators {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin: 1rem 0 0.5rem;
    }

    .indicator {
      width: 12px;
      height: 12px;
      border: none;
      border-radius: 50%;
      background: #4f4f4f;
      cursor: pointer;
      transition: all 0.3s;
      padding: 0;
    }

    .indicator:hover {
      background: #000;
    }

    .indicator:focus {
		background: #000;
		/*
      outline: none;
      box-shadow: 0 0 0 3px #3b82f6;
	  */
    }

    .indicator.active {
      background: #9c1152;
      width: 32px;
	  border-radius: 99em;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    .instructions {
      margin-top: 2rem;
      padding: 1.5rem;
      background: white;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .instructions h3 {
      font-size: 1rem;
      margin-bottom: 0.75rem;
      color: #1f2937;
    }

    .instructions ul {
      list-style: none;
      color: #4b5563;
      font-size: 0.875rem;
      line-height: 1.8;
    }
	
	
@media screen and (orientation:portrait) {
	.carousel-btn { width:40px; height:40px; }
	.carousel-btn i { font-size:200%; }
}

/*
    @media (max-width: 768px) {
      .carousel-slide {
        font-size: 1.5rem;
      }
      
      body {
        padding: 1rem;
      }
    }
	*/