astro-site-test/src/components/how-much/styles.css

@tailwind base;

@layer base {
  section {
    @apply grid w-full grid-cols-1 justify-center xl:gap-8 xl:grid-cols-[1fr_2fr];
  }

  section>div {
    @apply flex flex-col gap-md rounded-lg p-6;
  }

  label {
    @apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors hover:bg-gray-100;
  }

  label span {
    @apply text-lg;
  }

  input[type="radio"] {
    @apply h-4 w-4 text-secondary focus:ring-secondary;
  }

  #image-container {
    @apply relative aspect-[1.55/1] overflow-clip rounded-lg;
  }

  #image-wrapper {
    @apply absolute inset-0 transition-transform duration-300 ease-in-out flex flex-row xl:flex-col;
  }

  img {
    @apply aspect-[1.55/1] object-cover bg-[#272626];
  }

  #radio-group {
    @apply hidden flex-col xl:flex;
  }

  #carousel-indicators {
    @apply absolute -xl:bottom-4 -xl:left-1/2 transform -translate-x-1/2 flex gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col;
  }

  .indicator {
    @apply h-3 w-3 cursor-pointer rounded-full bg-secondary bg-opacity-50 transition-all duration-300 ease-in-out;
  }

  .indicator.active {
    @apply w-8 xl:h-8 xl:w-3 bg-opacity-100;
  }

  #slider-container {
    @apply w-full xl:hidden grid grid-cols-[auto_1fr_auto] gap-md max-w-xl place-self-center;
  }

  #view-slider {
    @apply w-full;
  }

  #slider-labels {
    @apply text-xs;
  }

}