.what-we-offer-container {
  background-color: var(--tertiary-black);

  .what-we-offer {
    padding: 3rem 0;

    @media (width >=768px) {
      padding: 3.25rem 0;
    }

    @media (width >=1024px) {
      padding: 2.5rem 0 4rem 0;
    }

    .heading {
      color: white;
      font-family: var(--service-font-family);
      font-size: var(--heading-font-6-mob);
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-11-mob-display);
      margin: 0;
      padding-bottom: 3rem;

      @media (width >=768px) {
        font-size: var(--heading-font-5-des);
        line-height: var(--heading-lh-2-des-display);
        padding-bottom: 3.375rem;
      }

      @media (width >=1024px) {
        line-height: var(--heading-lh-22-des-display);
        padding-bottom: 4rem;
      }
    }

    .items-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-16px);
      @media (width >=768px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media (width >= 1024px) {
        grid-template-columns: repeat(4, 1fr);
      }

      .tile {
        position: relative;
        min-height: 17.5rem;
        transition:
          transform 200ms ease,
          box-shadow 200ms ease;
        will-change: transform;
        overflow: hidden;

        .what-we-offer_card-btn {
          height: 100%;
          width: 100%;
          background: none;
        }

        button.what-we-offer_card-btn {
          text-align: left;
          cursor: pointer;
          border: none;
          padding: 0;
        }

        picture {
          line-height: 0;

          img {
            width: 100%;
            height: 100%;
            transition: transform 300ms ease;
            object-fit: cover;

            &.ob-left {
              object-position: left;
            }

            &.ob-right {
              object-position: right;
            }

            &.ob-center {
              object-position: center;
            }
          }
        }

        .item-content {
          position: absolute;
          padding: 0 var(--space-12px);
          width: 100%;
          z-index: 2;

          @media (width>=1024px) {
            padding: 0 var(--space-16px);
          }

          .item-heading {
            margin-bottom: var(--space-8px);

            .item-title {
              h1,
              h2,
              h3,
              h4,
              h5,
              h6 {
                font-weight: var(--fw-700);
                color: var(--tertiary-white);
                font-family: var(--service-font-family);
                font-size: var(--heading-font-8-mob);
                margin: 0;
                line-height: var(--heading-lh-19-mob-text-small);
                padding-right: 1.563rem;

                @media (width >=768px) {
                  padding-right: 3.75rem;
                }

                @media (width >=1024px) {
                  font-size: var(--heading-font-12-des);
                  line-height: var(--heading-lh-9-des-sub-heading);
                  padding-right: 0;
                }

                &::after {
                  display: inline-block;
                  height: 1rem;
                  width: 1rem;
                  margin-left: var(--space-4px);
                  vertical-align: middle;

                  @media (width >=1024px) {
                    height: 1.25rem;
                    width: 1.25rem;
                  }
                }
              }
            }

            .internal-icon {
              h1,
              h2,
              h3,
              h4,
              h5,
              h6 {
                &::after {
                  content: url('/icons/south_white.svg');

                  @media (width>=1024px) {
                    margin-bottom: var(--space-6px);
                  }
                }
              }
            }

            .item-title.external-icon {
              h1,
              h2,
              h3,
              h4,
              h5,
              h6 {
                &::after {
                  content: url('/icons/arrow_white.svg');

                  @media (width >=1024px) {
                    content: url('/icons/arrow_upward.svg');
                    height: 1.75rem;
                    width: 1.75rem;
                  }
                }
              }
            }

            .item-icon {
              margin-left: var(--space-4px);
              height: 1rem;
              width: 1rem;
              color: var(--tertiary-white);
              background-size: cover;
              flex-shrink: 0;

              @media (width >=1024px) {
                height: 1.25rem;
                width: 1.25rem;
              }
            }
          }

          .item-description {
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p {
              font-size: var(--heading-font-11-mob-text-small);
              font-weight: var(--fw-300);
              color: var(--tertiary-light-grey);
              margin: 0;
              line-height: var(--heading-lh-4--mob-text-medium);
              @media (width >=1024px) {
                font-size: var(--heading-font-20-des);
                line-height: var(--heading-lh-6-des);
              }
            }
          }
          .item-cta-arrow {
            .item-cta {
              padding: var(--space-8px) 0;
              display: flex;
              align-items: center;
              font-size: var(--heading-font-18-mob-text-small);
              line-height: var(--heading-lh-19-mob-text-small);
              color: var(--tertiary-white);
              font-weight: var(--fw-400);
              margin-top: var(--space-12px);
              gap: var(--space-8px);
              @media (width >=1024px) {
                margin-top: 0;
              }
              &::after {
                content: '';
                display: block;
                width: 3rem;
                height: 3rem;
                background: url('/icons/teaser_arrow-light.svg') center/contain no-repeat;
                margin-right: var(--space-6px);
                transition: transform 0.3s ease;
              }
            }
          }
        }

        &.side-image {
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 26%,
            rgba(3, 0, 0, 1) 100%
          );

          .item-content {
            @media (width >=768px) {
              bottom: var(--space-8px);
              top: unset;
            }

            @media (width >=1024px) {
              top: 0;
            }
          }

          picture {
            position: absolute;
            bottom: 0;
            left: 50%;
            z-index: 2;
            display: block;
            transform: translateX(-50%);

            @media (width >=768px) {
              left: unset;
              transform: none;
              right: var(--space-16px);
            }

            @media (width >=1024px) {
              left: 50%;
              transform: translateX(-50%);
              right: unset;
            }
          }
        }

        & > a {
          line-height: 0;
          display: block;
        }

        &:not(.no-image) {
          > a::after,
          > button::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background: linear-gradient(
              180deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0) 26%,
              rgba(3, 0, 0, 1) 100%
            );
            opacity: 0.7;
            transform: none;
            transition:
              opacity 300ms ease,
              transform 300ms ease;
            will-change: opacity, transform;
          }
        }

        &.no-image {
          background: linear-gradient(216deg, rgba(56, 79, 110, 0.6) 0%, rgba(90.81, 90.81, 90.81, 0.6) 100%);

          picture {
            display: none;
          }
        }
      }
      .tile:hover .item-cta-arrow .item-cta::after {
        transform: scale(1.5);
      }
    }
  }
}