#mediaContent {
  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;
        }
        .buttonContainer a.full-btn {
          color: var(--white);
          background: var(--brown);
          font-family: "Rexton-Regular";
          font-size: 12px;
          font-weight: normal;
          letter-spacing: 0.075em;
          line-height: 1em;
          text-transform: uppercase;
          padding: 0.5rem 1rem;
          position: relative;
          transition: 0.3s ease all;
          display: block;
          text-align: center;

          &:hover {
            background: #c49c78;
          }
        }
      }
      .sliderContainer .item .itemTextContainer h3 {
        color: #ffffff !important;
      }
    }
  }

  @media only screen and (max-width: 820px) {
    &.paddingNone .container.halfPanels .textContainer {
      padding: 0 4rem 6rem 4rem;
    }
  }
  @media only screen and (max-width: 600px) {
    &.paddingNone .container.halfPanels .textContainer {
      padding: 0 2rem 6rem 2rem;
    }
  }

  &.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;
        }
        .buttonContainer a.full-btn {
          color: var(--white);
          background: var(--brown);
          font-family: "Rexton-Regular";
          font-size: 12px;
          font-weight: normal;
          letter-spacing: 0.075em;
          line-height: 1em;
          text-transform: uppercase;
          padding: 0.5rem 1rem;
          position: relative;
          transition: 0.3s ease all;
          display: block;
          text-align: center;

          &:hover {
            background: #c49c78;
          }
        }
      }
      .sliderContainer .item .itemTextContainer h3 {
        color: #54565a !important;
      }
    }
  }
  &.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;
        }
        .buttonContainer a.full-btn {
          color: var(--black);
          background: var(--white);
          font-family: "Rexton-Regular";
          font-size: 12px;
          font-weight: normal;
          letter-spacing: 0.075em;
          line-height: 1em;
          text-transform: uppercase;
          padding: 0.5rem 1rem;
          position: relative;
          transition: 0.3s ease all;
          display: block;
          text-align: center;

          &:hover {
            color: var(--brown);
          }
        }
      }
      .sliderContainer .item .itemTextContainer h3 {
        color: #ffffff !important;
      }
    }
  }

  & .container {
    margin: 0;

    &.fullWidth {
      gap: 3rem;
      flex-direction: column;
      display: flex;
      align-items: center;
      justify-content: center;

      &.rowReverse {
        flex-direction: row-reverse;

        @media only screen and (max-width: 820px) {
          flex-direction: column-reverse;
        }
      }

      .textContainer {
        width: calc(100% - 12rem);
        padding: 0 6rem;
        position: relative;
        align-items: center;
        justify-content: center;

        @media only screen and (max-width: 820px) {
          width: calc(100% - 8rem);
          padding: 0 4rem;
        }
        @media only screen and (max-width: 600px) {
          width: calc(100% - 4rem);
          padding: 0 2rem;
        }

        .headingContainer {
          align-items: center;
          justify-content: center;
          display: flex;
          gap: 1rem;
          flex-direction: column;
          p,
          h2 {
            text-align: center;
          }
        }
        .copy {
          width: 100%;
          max-width: 800px;
          margin: auto;
          display: block;
          p {
            text-align: center;
          }
        }
        .buttonContainer {
          display: flex;
          align-items: center;
          gap: 2rem;
          justify-content: center;
          @media only screen and (max-width: 820px) {
            flex-direction: column;
          }
        }
      }
      .sliderContainer {
        width: 100%;
        @media only screen and (max-width: 820px) {
          width: 100%;
        }
      }
    }

    &.halfPanels {
      align-items: center;
      padding: 0 0rem;
      gap: 0;
      flex-wrap: wrap;
      display: flex;

      &.rowReverse {
        flex-direction: row-reverse;

        @media only screen and (max-width: 820px) {
          flex-direction: column-reverse;
        }
      }

      @media only screen and (max-width: 820px) {
        flex-direction: column;
        gap: 3rem;
      }

      .mediaContainer {
        width: 50%;
        position: relative;

        @media only screen and (max-width: 820px) {
          width: 100%;
        }

        img {
          aspect-ratio: 1 / 1;
          width: 100%;
          max-width: 100%;
          height: auto;
          object-fit: cover;
        }
      }
      .videoContainer {
        width: 50%;
        position: relative;

        @media only screen and (max-width: 820px) {
          width: 100%;
        }
      }
      .textContainer {
        width: calc(50% - 12rem);
        padding: 0 6rem;
        position: relative;

        @media only screen and (max-width: 900px) {
          width: calc(50% - 8rem);
          padding: 0 4rem;
        }

        @media only screen and (max-width: 820px) {
          width: calc(100% - 8rem);
          padding: 0 4rem;
        }

        @media only screen and (max-width: 600px) {
          width: calc(100% - 4rem);
        }

        .headingContainer {
          display: flex;
          gap: 1rem;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
        }
        .buttonContainer {
          display: flex;
          align-items: center;
          gap: 2rem;
          justify-content: flex-start;
        }
      }
      .sliderContainer {
        width: 50%;
        @media only screen and (max-width: 820px) {
          width: 100%;
        }
      }
    }

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

      .copy p {
        font-size: clamp(16px, 1vw, 20px) !important;
        font-family: brother-1816, Arial, Helvetica, sans-serif;
        font-weight: normal;
      }
    }

    .sliderContainer {
      display: block;

      .flickity-prev-next-button {
        background: transparent !important;
        width: 84px !important;
        height: 84px !important;

        svg {
          fill: #f2e4b6;
        }
      }
      .flickity-page-dots {
        display: none !important;
      }

      .item {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;

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

          .overlay {
            position: absolute;
            height: 300px;
            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 {
          img {
            width: 100%;
            aspect-ratio: 1 / 1;
            height: auto;
            object-fit: cover;
          }
        }

        .itemTextContainer {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          z-index: 3;
          padding: 0 6rem;
          @media only screen and (max-width: 820px) {
            padding: 0 4rem;
          }
          @media only screen and (max-width: 600px) {
            padding: 0 2rem;
          }

          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;
          }
        }
      }
    }
  }
}