.section-information-boxes {
  width: 100%;
}

.information-boxes__heading {
  font-size: 2rem;
  line-height: 1.3;
  color: #053e64;
  margin-bottom: 2rem;
  text-align: left;

  @media (min-width: 768px) {
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }
}

.information-boxes__wrapper {
  width: 100%;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(var(--desktop-columns, 3), 1fr);
    gap: 1rem;
  }
}

.information-boxes__wrapper--swipeable {
  @media (max-width: 767px) {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.information-boxes__wrapper--stacked {
  @media (max-width: 767px) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

.information-box {
  display: flex;
  flex-direction: column;

  @media (max-width: 767px) {
    .information-boxes__wrapper--swipeable & {
      flex: 0 0 85vw;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .information-boxes__wrapper--stacked & {
      flex: 1 1 auto;
      width: 100%;
    }
  }
}

.information-box--card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;

  .information-box__content {
    padding: 0 1.6rem 1.6rem 1.6rem;
  }
}

.information-box__image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.information-box__image-wrapper--1-1 {
  aspect-ratio: 1 / 1;
}

.information-box__image-wrapper--4-3 {
  aspect-ratio: 4 / 3;
}

.information-box__image-wrapper--3-4 {
  aspect-ratio: 3 / 4;
}

.information-box__image-wrapper--16-7 {
  aspect-ratio: 16 / 7;
}

@media (max-width: 767px) {
  .information-box__image-wrapper--mobile-1-1 {
    aspect-ratio: 1 / 1;
  }

  .information-box__image-wrapper--mobile-4-3 {
    aspect-ratio: 4 / 3;
  }

  .information-box__image-wrapper--mobile-3-4 {
    aspect-ratio: 3 / 4;
  }

  .information-box__image-wrapper--mobile-16-7 {
    aspect-ratio: 16 / 7;
  }
}

.information-box__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.information-box__content {
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  @media (min-width: 768px) {
    padding: 2rem 0;
    gap: 1.25rem;
  }
}

.information-box__title {
  font-family: 'Marlide Display', serif;
  font-size: 2.8rem;
  line-height: 1.3;
  color: #053e64;
  font-weight: 400;
  text-align: left;
  margin: 1.2rem 0 0 0;
}

.information-box__body {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #053e64;
  font-weight: 600;
  text-align: left;

  @media (min-width: 768px) {
    font-size: 1.4rem;
  }

  p {
    margin-bottom: 1rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  ul,
  ol {
    margin-left: 2rem;
    margin-bottom: 1rem;
  }

  li {
    margin-bottom: 0.5rem;
  }
}

.information-box__button {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  cursor: pointer;
  align-self: flex-start;
}

.information-box__button--pill {
  padding: 1.6rem 3.2rem;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  border-radius: 100px;
  border: none;
  background-color: var(--btn-bg);
  color: var(--btn-text);
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;

  &:hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-text-hover);
  }
}

.information-box__button--link {
  padding: 0;
  color: #053e64;
  letter-spacing: 0;
  background: none;
  border: none;
  position: relative;
  padding-bottom: 2px;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #BCC1CC;
  }
}

@media (prefers-reduced-motion: reduce) {
  .information-boxes__wrapper--swipeable {
    scroll-behavior: auto;
  }
}