#mediaGrid {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto !important;
  &.blue {
    background: #1e365d !important;
    .container {
      .textContainer {
        p.kicker {
          color: #b58254;
        }
        h2,
        .copy p,
        .copy p a,
        .copy p a:visited {
          color: #ffffff !important;
        }

        .copy p a,
        .copy p a:visited {
          text-decoration: underline;
        }
      }
    }
  }
  &.white {
    background: #ffffff;
    .container {
      .textContainer {
        p.kicker {
          color: #b58254;
        }
        h2 {
          color: #1e365d !important;
        }
        .copy p,
        .copy p a,
        .copy p a:visited {
          color: #54565a !important;
        }
        .copy p a,
        .copy p a:visited {
          text-decoration: underline;
        }
      }
    }
  }
  &.brown {
    background: #b58254 !important;
    .container {
      .textContainer {
        h2,
        p.kicker,
        .copy p,
        .copy p a,
        .copy p a:visited {
          color: #ffffff !important;
        }

        .copy p a,
        .copy p a:visited {
          text-decoration: underline;
        }
      }
    }
  }

  & .container {
    display: flex;
    gap: 6rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 6rem;
    @media only screen and (max-width: 820px) {
      flex-direction: column;
      padding: 0 4rem;
    }
    @media only screen and (max-width: 600px) {
      flex-direction: column;
      padding: 0 2rem;
    }

    .textContainer {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      .headingContainer {
        display: flex;
        gap: 1rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
      }
      .copy p {
        font-size: clamp(16px, 1vw, 20px) !important;
        font-family: brother-1816, Arial, Helvetica, sans-serif;
        font-weight: normal;
      }
    }
    .mediaGridContainer {
      display: grid;
      gap: 1rem;
      &.twoColumns {
        grid-template-columns: repeat(2, 1fr);
      }
      &.threeColumns {
        grid-template-columns: repeat(3, 1fr);

        .item {
          &.backgroundImage {
            min-height: 350px;
          }
        }
        @media only screen and (max-width: 820px) {
          grid-template-columns: repeat(2, 1fr);
        }
        @media only screen and (max-width: 600px) {
          grid-template-columns: repeat(1, 1fr);
        }
      }
      &.fourColumns {
        grid-template-columns: repeat(4, 1fr);
        @media only screen and (max-width: 820px) {
          grid-template-columns: repeat(2, 1fr);
        }
        @media only screen and (max-width: 600px) {
          grid-template-columns: repeat(1, 1fr);
        }
      }
      &.animateMediaGrid {
        .item .copy {
          display: none;
        }
        .item:hover .copy {
          display: block;
        }
        .item:hover .overlay {
          background: rgba(0, 0, 0, 0.7);
        }
      }
      .item {
        display: flex;
        flex-direction: column;
        position: relative;

        &.backgroundImage {
          padding: 2rem;
          justify-content: flex-end;
          background-size: cover !important;
          -moz-background-size: cover !important;
          -webkit-background-size: cover !important;

          .overlay {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            background: linear-gradient(
              0deg,
              rgba(0, 0, 0, 0.6) 0%,
              rgba(255, 255, 255, 0) 100%
            );
            z-index: 1;
          }
        }
        &.stacked {
          gap: 2rem;
          img {
            width: 100%;
            aspect-ratio: 1 / 1;
            height: auto;
            object-fit: cover;
          }
        }

        .itemTextContainer {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          z-index: 3;

          h3 {
            font-family: "Rexton-Regular";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 1.5px;
            text-transform: uppercase;
          }
          .copy p {
            font-size: clamp(16px, 1vw, 20px) !important;
            font-family: brother-1816, Arial, Helvetica, sans-serif;
            font-weight: normal;
          }
        }
      }
    }
  }
}