/* Small screens - 576px and below  */
@media (max-width: 576px) {
  /* Styles that only apply between 576px and below */
  .three-image-grid {
    .small-images {
      display: block;

      .small-image:first-child {
        margin-bottom: 1.5rem;
      }
    }
    & img {
      aspect-ratio: 3/2 !important;
    }

    &.large-left {
      grid-template-columns: 1fr;
      /* grid-template-rows: 1fr 1fr; */

      .large-image {
        grid-column: 1;
        grid-row: 1;
      }

      .small-images {
        grid-column: 1;
        grid-row: 2;
        flex-direction: column;

        .small-image {
          flex: 0 0 100%;
        }
      }
    }
    &.large-right {
      grid-template-columns: 1fr 1fr;
      /* grid-template-rows: 1fr 1fr; */

      .large-image {
        grid-column: 1 / span 2;
        grid-row: 2;
      }

      .small-images {
        grid-column: 1 / span 2;
        grid-row: 1;
        flex-direction: row;
      }
    }
  }

  .logo img {
    max-height: unset;
  }

  .logo {
    padding: 10px 10px;
    border-radius: 40px;
    max-width: 70%;
}

}