:root {
  --containerBgColor: #a60311;
  --containerLightBgColor: #c00212;
  --containerDarkerBgColor: #730202;
  --containerTextColor: #f2c49b;
  --containerSecondaryTextColor: #f2ba52;
  --containerThirdTextColor: #f2a74b;
  --Brown: #a65f37;
  --DarkAccent: #261610;
  --defaultPadding: 1rem;
  --defaultRaduius: 8px;
  --defaultGap: 1rem;
  --defaultBoxShadow: 0 3px 10px 1px #000000;
}

section.product {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--defaultPadding);
  gap: var(--defaultPadding);
  position: relative;
  overflow: hidden;
}

section.product .carousel {
  border-radius: var(--defaultRaduius);
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  overflow-x: scroll;
  scrollbar-width: none; /* For Firefox */
  padding: var(--defaultPadding);
  box-shadow: var(--defaultBoxShadow);
  background-color: var(--containerDarkerBgColor);
}
section.product .carousel img {
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--defaultRaduius);
}

.carousel::-webkit-scrollbar {
  display: none; /* For Chrome, Safari and Opera */
}

section.product .carousel_card {
  width: 90%;
  height: 22rem;
  min-height: 22rem;
  flex: 1 0 auto;
  margin-right: var(--defaultPadding);
  padding: var(--defaultPadding);
  color: var(--containerTextColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: var(--containerDarkerBgColor);
  gap: 2rem;
  position: relative;
  border: 1px solid var(--containerLightBgColor);
  border-radius: var(--defaultRaduius);
}

section.product .carousel_card h1,
h2,
h3 {
  z-index: 1;
}

section.product .carousel_card h1 {
  color: var(--containerThirdTextColor);
  text-align: center;
  font-size: 1.4rem;
  text-decoration: underline;
}

section.product .carousel_card h2 {
  color: var(--containerThirdTextColor);
  font-size: 1.4rem;
  text-align: center;
}
section.product .carousel_card h3 {
  color: var(--containerThirdTextColor);
  text-align: center;
  font-size: 1.2rem;
}

section.product .carousel #card_1 h2 {
  color: var(--containerTextColor);
}
section.product .carousel #card_2 h2 {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 1rem;
  color: var(--containerTextColor);
}
section.product .carousel #card_3 h1 {
  text-decoration: underline;
}
section.product .carousel #card_3 h3 strong {
  color: var(--containerSecondaryTextColor);
}
section.product .carousel #card_3 h3 {
  color: var(--containerTextColor);
  text-align: center;
}

section.product h1.introH1 {
  border-radius: none;
  background-color: transparent;
  color: var(--containerSecondaryTextColor);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--defaultGap);
  font-size: xx-large;
}

section.product h3.introH2 {
  border-radius: var(--defaultRaduius);
  padding: var(--defaultPadding);
  border: 1px solid var(--containerDarkerBgColor);
  background-color: var(--containerDarkerBgColor);
  color: var(--containerTextColor);
  text-align: center;
  box-shadow: var(--defaultBoxShadow);
  font-size: 1.5rem;
}

section.product .carousel_card h1 {
  position: absolute;
  top: 5%;
}

section.product .carousel_card h3 {
  margin-top: 3rem;
}

@media screen and (min-width: 1024px) {
  section.product h3.introH2 {
    width: 65%;
    text-align: center;
  }

  section.product div.carousel {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    box-shadow: none;
    background-color: transparent;
  }
  section.product div.carousel_card {
    width: 25%;
    height: 20rem;
    min-height: 20rem;
    display: flex;
    border: none;
    position: relative;
    transition: 0.7s ease-in-out;
    box-shadow: var(--defaultBoxShadow);
    border-radius: var(--defaultRaduius);
  }

  section.product div.carousel_card:hover {
    transform: scale(1.09);
    z-index: 1;
  }

  section.about div.carousel h1,
  h2,
  h3 {
    width: 100%;
    text-align: justify;
  }

  section.product .carousel_card h1 {
    position: absolute;
    top: 15% !important;
  }
  section.product div.carousel #card_3 h3 {
    margin-top: 2rem !important;
  }
}

@media (min-width: 768px) {
  section.product .carousel {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    flex: 1 0 auto;
  }
  section.product .carousel_card {
    width: 25%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--defaultRaduius);
  }
  section.product div.carousel #card_1 h2 {
    margin-top: 2rem;
  }
  section.product div.carousel #card_3 h3 {
    margin-top: 4rem !important;
  }
}

@media screen and (min-width: 1440px) {
  section.product .carousel #card_1 h2 {
    transform: none !important;
  }
  section.product .carousel #card_2 h2 {
    transform: none !important;
  }
}