/* Media Content Grid Component Styles */

/* Using TailwindCSS classes primarily, custom CSS only when necessary */

.media-content-grid {
  width: 100%
}

/* Section Title */

.media-content-grid-title {
  margin-bottom: 2rem;
  text-align: left;
  font-size: var(--font-h2);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight-bold);
  color: var(--color-text)
}

/* Main Grid Container */

.media-content-grid-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
  padding: 1.5rem
}

@media (min-width: 768px) {
  .media-content-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* Individual Card Styling */

.media-content-item {
  display: flex;
  flex-direction: column
}

.media-content-item > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.media-content-item-title {
  font-size: var(--font-h3);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight-semi-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-text)
}

.media-content-item-description {
  font-size: var(--font-h4);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight-regular);
  line-height: 150%;
  color: var(--color-text)
}

/* Media Container */

.media-content-item-media {
  width: 100%;
  overflow: hidden;
  border-radius: 30px
  /* Custom rounded-[30px] using CSS since TailwindCSS doesn't support this value */
}

.media-content-item-media img,
.media-content-item-media video {
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 30px
  /* Ensure media elements also have rounded corners */
}

/* Video specific styles */

.media-content-item-media video {
  max-width: 100%
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .media-content-grid-container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem
  }

  .media-content-grid-title {
    margin-bottom: 1.5rem;
    font-size: var(--font-h2);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-weight: var(--font-weight-bold)
  }

  .media-content-item > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
  }
}