.text-and-media {
  &:not(.grid) {
    &:has(.swiper) {
      padding-right: 0;
    }
  }

  &.flex {
    gap: 15px;

    .text-and-media__text-container,
    .text-and-media__media-container {
      gap: 12px;

      .slider {
        width: 100%;
      }

      .swiper-slide:not(.product-media-slide):not(:last-child) {
        margin-right: 12px;
      }
    }

    &.section-stack {
      flex-direction: column;

      .text-and-media__text-container,
      .text-and-media__media-container {
        width: 100%;
        max-width: 100%;
      }

      .text-and-media__text-container:not(:has(.text-and-media__text)) .text-and-media__heading {
        margin-bottom: 5px;
      }

      .text-and-media__image {
        min-width: calc(var(--media-width-mobile) - 8px);
      }
    }

    &:not(.section-stack) {
      .text-and-media__text-container {
        width: var(--text-width);
        max-width: var(--text-max-width);
      }

      .text-and-media__media-container {
        width: calc(var(--media-width) - 16px);
        max-width: calc(var(--media-width) - 16px);
      }
    }

    &.reverse {
      flex-direction: column-reverse;
    }
  }

  &.grid {
    display: grid;
    gap: var(--grid-spacing-mobile);
    grid-template-columns: repeat(var(--grid-size-mobile), minmax(0, 1fr));

    .text-and-media__image,
    .text-and-media__product {
      width: 100%;
      max-width: 100%;
    }

    .text-and-media__text {
      margin-bottom: 0;
    }
  }

  .text-and-media__heading {
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.005px;
    text-transform: uppercase;

    > * {
      font-size: var(--heading-size-mobile, 23px);
    }
  }

  .text-and-media__text {
    font-size: var(--text-size-mobile, 13px);
    font-weight: 350;
    line-height: 1.5;
    letter-spacing: 0.001px;
    margin-bottom: 30px;

    &.text-split {
      margin-top: auto;
    }
  }

  .text-and-media__link {
    font-size: var(--link-size-mobile, 13px);
    font-weight: 350;
    line-height: 1.5;
    letter-spacing: 0.001px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  .text-and-media__slider-heading {
    line-height: 1.2;

    &.font-size-custom {
      > * {
        font-size: var(--slider-heading-size-mobile);
      }
    }
  }

  .text-and-media__image {
    display: block;
    width: var(--media-width-mobile);
    min-width: var(--media-width-mobile);
    text-decoration: none;

    &:has(.block--boxed-both) {
      display: flex;
      flex-direction: column;
    }

    &.over {
      position: relative;

      .image-caption,
      .image-description {
        position: absolute;
        left: 14px;
        bottom: 14px;
      }
    }

    .image-caption,
    .image-description {
      display: block;
      margin-top: 8px;
      width: 100%;
      text-align: var(--media-text-align);
      color: var(--text-color);
    }

    .image-desktop {
      display: none;
    }

    img {
      width: 100%;
    }
  }

  .text-and-media__image--wrapper {
    position: relative;
    width: 100%;

    &.block--boxed-both {
      max-width: var(--container-width-mobile);
      max-height: var(--container-heigth-mobile);

      + .image-caption,
      + .image-description {
        max-width: var(--container-width-mobile);
      }
    }

    &.mobile--wrapper {
      &::before {
        content: '';
        display: block;
        padding-top: var(--aspect-ratio-mobile);
      }
    }

    &::before {
      content: '';
      display: block;
      padding-top: var(--aspect-ratio-desktop);
    }

    .image-mobile,
    .image-desktop,
    .desktop-only {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: var(--image-fit-desktop);
    }

    .image-mobile {
      object-fit: var(--image-fit-mobile);
    }
  }

  .text-and-media__product {
    width: var(--card-width-mobile);
    max-width: var(--card-width-mobile);

    .prod-info-txt {
      padding-left: 10px;
      padding-right: 10px;
    }

    &.product--boxed-both {
      display: flex;
      flex-direction: column;

      .product-card {
        width: 100%;
        height: 100%;
        max-width: var(--container-width-mobile);
        max-height: var(--container-heigth-mobile);

        .hover-container,
        .product-card-media-1,
        .product-card-media-2 {
          aspect-ratio: auto;
          height: 100%;
        }

        .prod-block {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .product-card-container {
          height: stretch;
          height: -webkit-fill-available;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .text-and-media:has(.slider--mobile) {
    padding-right: 0;
  }

  .text-and-media .text-and-media__media-container.flex.slider--mobile {
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-align: start;
    scroll-snap-type: x mandatory;
    padding-right: var(--wrapper-left-and-right-margin);
  }
}

@media screen and (min-width: 1025px) {
  .text-and-media {
    &.flex {
      gap: 20px;

      &.section-stack {
        gap: 10px;
        flex-direction: row;

        .text-and-media__text-container {
          width: var(--text-width);
          max-width: var(--text-max-width);
        }

        .text-and-media__media-container {
          width: calc(var(--media-width) - 10px);
          max-width: calc(var(--media-width) - 10px);
        }

        .text-and-media__image {
          min-width: calc(var(--media-width-desktop) - 8px);
        }
      }

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

      .text-and-media__text-container {
        width: var(--text-width);
        max-width: var(--text-width);
      }

      .text-and-media__media-container {
        width: calc(var(--media-width) - 16px);
        max-width: calc(var(--media-width) - 16px);
        gap: 16px;

        .swiper-slide:not(.product-media-slide):not(:last-child) {
          margin-right: 16px;
        }
      }

      .text-and-media__image {
        width: calc(var(--media-width-desktop) - 8px);
        min-width: calc(var(--media-width-desktop) - 8px);

        &:has(.block--boxed-desktop-only) {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }

      .text-and-media__product {
        width: calc(var(--card-width-desktop) - 8px);
        max-width: calc(var(--card-width-desktop) - 8px);

        .prod-info-txt {
          padding-left: 12px;
          padding-right: 12px;
        }
      }
    }

    &.grid {
      grid-template-columns: repeat(var(--grid-size-desktop), minmax(0, 1fr));
    }

    .text-and-media__image {
      .image-desktop {
        display: block;
      }

      .image-mobile {
        display: none;
      }
    }

    .text-and-media__image--wrapper {
      &.mobile--wrapper {
        &::before {
          padding-top: var(--aspect-ratio-desktop);
        }
      }

      &.block--boxed-both,
      &.block--boxed-desktop-only {
        max-width: var(--container-width);
        max-height: var(--container-heigth);

        + .image-caption,
        + .image-description {
          max-width: var(--container-width);
        }
      }
    }

    .text-and-media__heading {
      margin-bottom: 30px;
      > * {
        font-size: calc(var(--heading-size-desktop, 30px) - 7px);
      }
    }

    .text-and-media__text {
      margin-bottom: 40px;
      font-size: var(--text-size-desktop, 13px);
    }

    .text-and-media__link {
      font-size: var(--link-size-desktop, 13px);
    }

    .text-and-media__slider-heading {
      &.font-size-custom {
        > * {
          font-size: var(--slider-heading-size-desktop);
        }
      }
    }

    .text-and-media__product {
      &.product--boxed-both,
      &.product--boxed-desktop-only {
        display: flex;
        flex-direction: column;

        .product-card {
          max-width: var(--container-width);
          max-height: var(--container-heigth);
        }
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .text-and-media {
    &.grid {
      gap: var(--grid-spacing-desktop);
    }

    .text-and-media__media-container {
      gap: 20px;
      width: calc(var(--media-width) - 20px);
      max-width: calc(var(--media-width) - 20px);
    }
  }
}