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

section.price {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--defaultPadding);
}

section.price h1 {
  font-size: 2rem;
  color: var(--containerSecondaryTextColor);
  text-align: center;
  margin-bottom: var(--defaultGap);
  margin-top: 1rem;
}

section.price div.carousel {
  background-color: var(--containerDarkerBgColor);
  border-radius: var(--defaultRaduius);
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none; /* For Firefox */
  padding: var(--defaultPadding);
  margin-bottom: 2rem;
  box-shadow: var(--defaultBoxShadow);
}



section.price div.carousel .carousel_card {
  width: 90%;
  height: 25rem;
  min-height: 25rem;
  flex: 1 0 auto;
  margin-right: var(--defaultPadding);
  padding: var(--defaultPadding);
  color: var(--containerTextColor);
  border-radius: var(--defaultRaduius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: var(--containerDarkerBgColor);
  gap: 0.5rem;
  position: relative;
  /* box-shadow: var(--defaultBoxShadow); */
}

section.price div.carousel .carousel_card h1 {
  position: absolute;
  top: 10%;
}
section.price div.carousel .carousel_card h2 {
  position: absolute;
  top: 10%;
}

section.price div.carousel .carousel_card h3 {
  position: absolute;
  top: 10%;
}

section.price div.carousel .carousel_card img:not(.background) {
  position: absolute;
  bottom: 5%;
}

section.price div.carousel .carousel_card img.background {
  position: absolute !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

section.price div.carousel .carousel_card h1:first-of-type {
  text-decoration: underline;
  font-size: 1.5rem;
}
section.price div.carousel .carousel_card h1:last-of-type {
  font-size: 1rem;
  margin-top: 3.5rem;
}

section.price div#card_3 h1 {
  font-size: 1.5rem;
  margin-top: 1rem;
}

section.price div.carousel .carousel_card h1 {
  font-size: 2rem;
  color: var(--containerSecondaryTextColor);
}

section.price div.carousel .carousel_card img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--defaultRaduius);
}

section.price div#card_1 img {
  object-fit: contain;
  width: 50%;
  z-index: 3;
}

section.price div#card_2 img:not(.background) {
  width: 130%;
  object-fit: cover;
  z-index: 3;
  transform: translateY(16%);
}
@media screen and (min-width: 425px) {
  section.price div#card_1 img:not(.background) {
    width: 25%;
  }
  section.price div#card_2 img:not(.background) {
    width: 75%;
  }
}
section.price div#card_3 img {
  object-fit: contain;
  z-index: 3;
}

section.price div.carousel .carousel_card h1,
h2,
h3 {
  z-index: 3;
  color: var(--containerDarkerBgColor);
}

button.buy {
  width: 100%;
  padding: 1rem;
  color: var(--containerDarkerBgColor);
  background-color: var(--containerSecondaryTextColor);
  border: none;
  border-radius: 32px;
  cursor: pointer;
  transition: 0.7s ease-in-out;
  font-size: 1.7rem;
  font-weight: 700;
  margin-top: 1rem;
  text-decoration: underline;
}

button.buy:hover {
  background-color: #bf895a;
  color: var(--containerBgColor);
}

h1.price {
  background-color: var(--containerDarkerBgColor);
  color: var(--containerSecondaryTextColor);
  padding: 0.5rem;
  border-radius: var(--defaultRaduius);
}
@media screen and (min-width: 375px) {
  button.buy {
    width: 80%;
  }
}

@media screen and (min-width: 548px) {
  section.price div.carousel_card img:not(.background) {
    width: 85%;
  }

  section.price div#card_2 img:not(.background) {
    width: 80%;
  }
}

@media screen and (min-width: 768px) {
  section.price div.carousel {
    width: 100%;
    min-height: 100%;
    display: flex;
  }
  section.price .carousel_card img {
    width: 25%;
  }

  section.price div.carousel .carousel_card {
    width: 50%;
  }

  section.price div#card_1 img.mobile {
    width: 30%;
    
  }
  section.price div#card_2 img {
    width: 45%;
  }
  section.price div#card_3 img {
    width: 80%;
  }
  button.buy {
    width: 40%;
  }
}
@media screen and (min-width: 1024px) {
  section.price div.carousel {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    box-shadow: none;
  }

  section.price div.carousel div.carousel_card {
    width: 25%;
    gap: 0.5rem;
    /* height: 22rem;
    min-height: 22rem; */
    display: flex;
    background-color: var(--containerDarkerBgColor);
    border: none;
    position: relative;
    transition: 0.7s ease-in-out;
    box-shadow: var(--defaultBoxShadow);
  }
  section.price div.carousel_card:hover {
    transform: scale(1.09);
    z-index: 1;
  }

  section.price div.carousel_card img {
    width: 40%;

    object-fit: cover;
  }
  section.price div#card_1 img {
    width: 35%;
    object-fit: contain;
  }
  section.price div#card_2 img {
    object-fit: contain;
  }
  button.buy {
    width: 29%;
  }
}
@media screen and (min-width: 1440px) {
  section.price div#card_1 img {
    margin-top: -5%;
    width: 33%;
    object-fit: contain;
  }

  section.price div#card_2 img:not(.background) {
    width: 70%;
  }
  section.price div.carousel .carousel_card img.background {
    margin-top: 0 !important;
  }
  button.buy {
    width: 20%;
  }
}

@media screen and (min-width: 2560px) {
  section.price div.carousel .carousel_card img:not(.background) {
    width: 30% !important;
    object-fit: cover !important;
  }
  section.price div.carousel .carousel_card img.mobile {
    width: 15% !important;
  }
}