.embla {
  margin: auto;
  max-width: 1200px;
  --slide-height: 19rem;
  --slide-spacing: 1rem;
  /* Slide width comes from a declared count so the FIRST paint is already the
     final layout. carousel.js writes an inline --slide-size from the
     data-slides-per-page* attributes (sizeOneEmbla), but only after Embla has
     been fetched over the network; until then the browser paints whatever this
     rule says. A flat 100% here is what made every multi-card carousel paint
     one full-width slide and then snap down -- the load flash.
     3 / 2 / 1 is the house default, so a plain <div class="embla"> needs no
     configuration. A carousel that wants something else overrides from its own
     scoped rule, mirroring its data attributes:
         #resources .embla { --slides-per-page: 4; --slides-per-page-tablet: 2; }
     The three are independent -- overriding the desktop count does not change
     the tablet or mobile one. Breakpoints mirror BREAKPOINTS in carousel.js
     (mobile <= 480, tablet <= 993). */
  --slides-per-page: 3;
  --slides-per-page-tablet: 2;
  --slides-per-page-mobile: 1;
  --slide-size: calc(100% / var(--slides-per-page));
}

@media (max-width: 993px) {
  .embla {
    --slide-size: calc(100% / var(--slides-per-page-tablet));
  }
}

@media (max-width: 480px) {
  .embla {
    --slide-size: calc(100% / var(--slides-per-page-mobile));
  }
}
.embla__viewport {
  /* Clipping happens at the padding edge, so this padding is what lets the
     card shadow and :hover lift show. data-viewport-overflow="visible" swaps
     this for overflow: clip + overflow-clip-margin at runtime. */
  overflow: hidden;
  padding: 10px 0;
}

/* .is-centered is still toggled by the JS when the slides do not overflow the
   viewport (carousel.js, updateFit), but it deliberately no longer moves
   anything. It was measured after init, so a carousel with fewer items than
   slots painted left-aligned and then slid to the middle -- a visible jump on
   every load. Left-aligned is correct at every item count and every
   breakpoint, which centring cannot be: slides-per-page drops to 2 and then 1,
   so the same item count overflows on tablet and mobile but not on desktop.
   The class is left in place for anything that wants to style off it. */
.embla__container {
  user-select: none;
  overflow: visible;
  backface-visibility: hidden;
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing) * -1);
}
.embla__slide {
  transform: translate3d(0, 0, 0);
  flex: 0 0 var(--slide-size);
  padding-left: var(--slide-spacing);
}
.embla__slide__number {
  box-shadow: inset 0 0 0 0.2rem #cccccc;
  border-radius: 1.8rem;
  font-size: 4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--slide-height);
  user-select: none;
}

.embla__button:disabled {
  color: #999;
}
.embla__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
}

.embla__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.embla__button {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.embla__button__svg {
  width: 25px;
  height: 25px;
  fill: #0077c8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.embla__dots {
  display: flex;
  gap: 0.5em;
}

.embla__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s;
}

.embla__dot--selected {
  background: #0077c8;
  transform: scale(1.2);
}
.card {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-10px);
}
.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card__content {
  padding: 2em;
  height: 250px;
}
.card__meta {
  font-size: 0.875em;
  color: #757575;
  margin-bottom: 10px;
}
.card__title {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #333333;
}
.card__description {
  font-size: 1em;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 10px;
  height: 350px;
}