.section-text-media {
  &.background-grey {
    position: relative;

    &::after {
      position: absolute;
      top: -100px;
      left: 0;
      right: 0;
      bottom: -100px;
      z-index: -1;
      background: var(--grey-300);
      content: '';
    }
  }

  &.with-contact-details {
    .row .content-wrapper {
      h2 {
        font-size: var(--text-h1);

        @media (max-width: 991px) {
          font-size: var(--text-h1-mobile);
        }
      }

      h3 {
        margin-top: 50px;
        font-size: var(--text-h2);
      }
    }
  }

  .image-wrapper {
    height: 100%; 
  }

  .image-order {
    @media (max-width: 991px) {
       order: -1;
    }
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;

    @media (max-width: 991px) {
      height: 380px;
    }
  }

  .contact-wrapper {
    border-radius: 20px;
    padding: 50px;
    background: var(--grey-300);

    @media (max-width: 991px) {
      padding: 20px;
    }

    h4 {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 600;
    }

    span {
      opacity: 0.7;
      font-size: 14px;
    }

    .address-wrapper {
      .icon {
        &::before {
          font-weight: 400;
        }
      }
      
      p {
        margin-bottom: 0;
        opacity: 0.7;
        font-size: 14px;
      }
    }

    .opening-hours {
      width: 300px;

      @media (max-width: 991px) {
        padding-left: 0;
        margin-top: 30px;
      }
      
      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }

  .cta {
    min-width: 200px;
  }

  .row {
    div {
      &:last-child {
        .content-wrapper {
          padding-left: 40px;

          @media (max-width: 991px) {
            padding-left: 0;
          }
        }
      }
      &:first-child {
        .content-wrapper {
          padding-right: 40px;

          @media (max-width: 991px) {
            padding-right: 0;
          }
        }
      }
    }

    .content-wrapper {
      @media (max-width: 991px) {
        padding-top: 30px;
      }
      
      h2 {
        font-size: var(--text-h2);

        @media (max-width: 991px) {
          padding-bottom: 20px;
        }
      }

      p {
        font-family: var(--font-text);
      }

      .contact-details {
        margin-top: 30px;
        margin-bottom: 30px;

        @media (max-width: 991px) {
          flex-direction: column; 
        }

        h4 {
          margin-bottom: 10px;
        }
      }
    }
  }
}