/* Content Section */
.content {
  padding-top: calc(var(--header-height) + 5vh);
  padding-bottom: calc(var(--footer-height) + 5vh);
  display: flex;
  flex-direction: column;
}

h2 {
  font-family: "Bebas Neue", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--body-font) * 2);
  text-align: center;
  color: var(--purple);
}

/* Carousel Section */
#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 100vw;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 150vw;

  -webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
  mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Item Section */
.item {
  position: absolute;
  height: 95%;
  cursor: pointer;

  transform: var(--transform);
  z-index: var(--z);
  transition: all 0.25s linear;
}

.item img {
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
}

/* Active Item Section */
.active img:hover {
  opacity: 30%;
}

/* Hero Text Section */
.hero-text {
  position: absolute;
  background-color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  z-index: -1;
}

.hero-text p {
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--body-font) * 0.9);
  text-align: center;

  color: var(--white);
  padding: 10%;
}

/* Radio Buttons Section */
#radio-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(var(--footer-height) * 0.3);
}

#radio-buttons .radio-button {
  width: var(--body-font);
  height: var(--body-font);

  background-color: var(--white);

  appearance: none;
  border-radius: 50%;
  border: calc(var(--body-font) * 0.1) solid var(--pink);

  transition: background-color 0.15s ease-in-out;
}

/* Checked Radio Button Section */
#radio-buttons .radio-button:checked {
  background-color: var(--pink);
  border-color: var(--pink);
}