.up-grid-graphics {
  font-size: 1.8rem;
  text-align: center;

  a {
    font-size: 1.6rem;
    color: rgb(var(--color-text));
    text-decoration: underline;
  }

  .up-grid-graphics__header {
    margin-bottom: 4.8rem;
  }

  .up-grid-graphics__header-content {
    margin: 2.4rem auto 0;
    max-width: 70.4rem;
  }

  .up-grid-graphics__grid {
    grid-template-columns: repeat(auto-fit, 1fr);
    display: grid;
    margin-right: -1.2rem;
    margin-left: -1.2rem;

    &.up-grid-graphics__grid--odd {
      @media (min-width: 767px) {
        grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
      }
    }

    &.up-grid-graphics__grid--even {
      @media (min-width: 576px) {
        grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
      }
      @media (min-width: 991px) {
        grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
      }
    }
  }

  .up-grid-graphics__grid-item {
    padding: 1.2rem;

    .up-grid-graphics__grid-item-inner {
      flex-direction: column;
      gap: 1.6rem;
      display: flex;
    }
  }

  .up-grid-graphics__grid-item-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    aspect-ratio: 1 / 1;

    .up-grid-graphics__grid-item-image {
      position: absolute;
      width: 100%;
      height: 100%;
      inset: 0;
      object-fit: cover;
      object-position: center;
    }
  }

  .up-grid-graphics__grid-item-title,
  .up-grid-graphics__grid-item-content {
    padding: 0 2.2rem;
  }
}