.info {
 display: flex; 
 flex-direction: column;
 gap: 0.5em;
 width: 95%; 
 margin-inline: auto;
}

h1 {
  font-size: 3rem;
  font-weight: 300;
  margin-block: 0;
}

.info button {
  border: 2px solid #24b4fb;
  background-color: transparent;
  border-radius: 0.9em;
  cursor: pointer;
  padding: 0.6em 0.8em;
  transition: all ease-in-out 0.2s;
  font-size: 16px;
  width: fit-content;
}

.info button:hover {
  background-color: #24b4fb;
}


/* https://www.youtube.com/watch?v=rTB-UNl_B_Y */

.carousel {
  display: grid;
  grid-template-columns: 5% auto 5%;
  width: 100%;
  margin: 3em auto;
  @media (width < 700px) {
   grid-template-columns: 1fr;; 
  }
}

.carousel__current-frame {
  /* border: 2px solid #ccc; */
  overflow: hidden; 
  display: grid;
  place-items: center;
}

.carousel__frames {
  display: grid;
  transition: all 0.3s;
  height: 100%;
  margin: 0 auto;
}

.carousel__frame img {
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.carousel__toggle {
  display: flex;
  justify-content: space-between;
  width: 97%;
  /* z-index: 1; */
  /* align-self: center; */
  /* justify-self: center; */
  place-items: center;
}

.carousel__toggle button {
  display: grid;
  place-items: center;
  width: 5em;
  height: 10em;
  border: none;
  cursor: pointer;
  z-index: 999;
  background: transparent;
  border: 1px solid black;
  border-radius: 5px;
  @media (width < 700px) {
   display: none; 
  }
}

.carousel__toggle button:hover {
  background-color: #24b4fb;
}

.carousel__toggle__button__prev {
}

.carousel__toggle__button__next {
}

.carousel__toggle img {
  width: 100%;
}