/* Root custom properties (replacing Sass variables) */
.photo-root {
  --photo-color-crater-brown: hsl(4deg 29% 22%);
  --photo-color-gondola: hsl(0deg 25% 10%);
  --photo-color-ecru-white: hsl(60deg 46% 95%);
  --photo-color-bizarre: hsl(29deg 41% 88%);
  --photo-color-hampton: hsl(30deg 51% 80%);
  --photo-color-muddy-waters: hsl(25deg 38.3% 58%);
  --photo-color-fuel-yellow: hsl(37deg 83.2% 53.3%);

  --photo-spacing-padding-block: 2rem;
  --photo-spacing-padding-inline: 2rem;
  --photo-spacing-padding-inline-large: 4rem;

  --photo-container-ipad: 744px;
  --photo-container-ipad-landscape: 1133px;
  --photo-container-mobile: 600px;
}

/* Reset styles */
.photo-carousel *, .photo-carousel *::before, .photo-carousel *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.photo-carousel img {
  width: 100%;
  display: block;
  height: auto;
}

/* Base styles */
.photo-carousel-wrapper {
  background-color: #D7B32A;
  font-size: 16px;
	padding: 50px 0 50px 0;  color: var(--photo-color-ecru-white);
}

.photo-carousel-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--photo-spacing-padding-block) var(--photo-spacing-padding-inline);
}

.photo-carousel-header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.photo-carousel-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--photo-color-ecru-white);
}

@media (prefers-reduced-motion: no-preference) {
  
}

.photo-carousel-header p {
  line-height: 1.7;
}

@media (min-width: 600px) {
  .photo-carousel-header p {
    font-size: 1.125rem;
  }
}

.photo-card {
  color: var(--photo-color-gondola);
  background-color: var(--photo-color-ecru-white);
  padding: 1.5rem;
  border-radius: 0.25rem;
  pointer-events: auto;
}

.photo-card h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem; text-align: center;
}

.photo-card p:not(:last-of-type) {
  margin-bottom: 0.75rem;
}

.photo-image-content {
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

/* Carousel styles */
.photo-carousel {
  overflow: hidden;
  pointer-events: none;
}

.photo-carousel[data-animated="true"] {
  @media (prefers-reduced-motion: reduce) {
    overflow: visible;
  }
}

.photo-carousel-items {
  list-style: none;
  align-items: start;
  display: grid;
  gap: 4rem;
  grid-auto-columns: 20rem;
  grid-auto-flow: column;
  padding-bottom: var(--photo-spacing-padding-block);
}

@media (max-width: 600px) {
  .photo-carousel-items {
    gap: 2rem;
  }
}

@media (min-width: 1133px) {
  .photo-carousel-items {
    grid-auto-columns: 30rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-carousel-items {
    overflow: visible;
    overflow-x: scroll;
  }
}

.photo-carousel[data-animated="true"] .photo-carousel-items {
  @media (prefers-reduced-motion: no-preference) {
    animation: photo-scroll 60s linear infinite;
    width: max-content;
  }
}

.photo-carousel[data-animated="true"] .photo-carousel-items:hover,
.photo-carousel[data-animated="true"] .photo-carousel-items:focus {
  animation-play-state: paused;
}

@keyframes photo-scroll {
  to {
    transform: translate(calc(-50% - .5rem));
  }
}