/* Base styles for figures */
figure {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 2em 0;
  }
  
img,
iframe,
.fluid-width-video-wrapper {
  width: 100%;
  margin-bottom: 1em;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

/* General anchor styling inside figure */
figure > a {
  display: block;
}

/* Styles for half and third classes */
figure.half > a{
  width: calc(50% - 0.5em); /* Default to half */
}

figure.third > a {
  width: calc(33.3333% - 0.5em); /* Adjust for third */
}

/* Images fill their anchors fully */
figure > a > img {
  width: 100%;
  object-fit: cover; /* Adjusts how the images fit within their boxes */
}

/* Figure captions styling */
figcaption {
  margin-bottom: 0.5em;
  color: {{ site.link-col | default: "#008AFF" }};
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.125rem;

  a {
    transition: all 0.2s ease-in-out;

    &:hover {
      color: {{ site.hover-col | default: "#0085A1" }};
    }
  }
}

/* Video container */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}