.masonry {
  background: #94979b1a;
  padding-top: 48px;
  padding-bottom: 48px;
  margin-bottom: 48px;

  &__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;

    &__item {
      $item: &;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.07);
      display: flex;
      flex-direction: column-reverse;

      &__header {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      &__title {
        all: initial;
        font: 700 16px/1.166 'open-sans', sans-serif;
        color: inherit;
      }

      &__text {
        all: initial;
        font: 400 12px/1.375 $font-family-sans-serif;
        color: inherit;
      }

      &__btn {
        all: initial;
        display: inline-block;
        font:
          700 20px/1 'open-sans',
          sans-serif;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 8px 24px;
        border-radius: 1000px;
        border: 3.5px solid #4f4f4f;
        background: #4f4f4f;
        cursor: pointer;
        text-align: center;

        &,
        &:hover,
        &:focus,
        &:active,
        &:visited {
          color: #fff;
          text-decoration: none;
        }
      }

      &__image {
        width: 100%;
        height: 100%;
        object-fit: cover;

        &__container {
          width: 100%;
          aspect-ratio: 16 / 9;
        }
      }

      &.--small {
        #{$item}__image {
          &__container {
            width: 40px;
            height: 40px;
            aspect-ratio: unset;
            margin: 16px 0 0 16px;
            border-radius: 7px;
            overflow: hidden;
          }
        }
      }
    }
  }

  @media screen and (min-width: 992px) {
    &__items {
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      &__item {
        $item: &;
        grid-column: span 2;

        &__text {
          font-size: 14px;
        }

        &__btn {
          font-size: 16px;
          border: 0;
        }

        &:not(.--small) {
          flex-direction: row-reverse;

          #{$item}__header {
            justify-content: center;
            align-items: start;
            padding: 32px;
            // Since the max-width for the __image below is 60%, we have to set the min-width to 40% (issue with only a few words of content)
            min-width: 40%;
          }

          #{$item}__image {
            &__container {
              aspect-ratio: 1.5;
              max-width: 45%;
            }
          }
        }

        &:first-child {
          grid-column: span 3;
          flex-direction: row;

          #{$item}__image {
            &__container {
              max-width: 60%;
              aspect-ratio: 2;
            }
          }
        }

        &.--small:not(:first-child) {
          grid-column: span 1;
          order: 100;
        }
      }
    }
  }
}
