.tech-module {
  --_grid-template: "bgarea" "carousel";
  --_carousel-grid-area: carousel;
  --_carousel-margin: 0.5rem;
  --_icons-padding-inline: 2.1875rem;
  --_carousel-width: calc(100vw - 1rem);
  display: grid;
  grid-template: var(--_grid-template);

  .tech-module__background,
  .tech-module__heading,
  .tech-module__icons {
    grid-area: bgarea;
  }

  .tech-module__heading {
    margin-top: 1.75rem;
    margin-left: 1.75rem;
  }

  .tech-module__background {
    background-color: var(--_background-color, transparent);
  }

  .tech-module__icons {
    padding: 1.75rem var(--_icons-padding-inline) 1.5rem;
  }

  .tech-module__icon {
    background-color: var(--theme-color-white);
    transition: background-color 0.2s linear;

    .tech-module__icon--image-active {
      display: none;
    }

    &:hover {
      background-color: var(--theme-color-primary-transparent);
    }

    .tech-module__icon--image-inactive {
      mix-blend-mode: darken;
    }

    &[aria-selected="true"] {
      .tech-module__icon--image-inactive {
        display: none;
      }

      .tech-module__icon--image-active {
        display: block;
      }
    }
  }

  .tech-module__carousel {
    grid-area: var(--_carousel-grid-area);
    margin: var(--_carousel-margin);
    max-width: var(--_carousel-width);

    .swiper-wrapper {
      height: auto;
      max-width: var(--_carousel-width);
    }

    .inline-card .inline-card__link {
      max-width: var(--_carousel-width);
      border-radius: .5rem;
      overflow: hidden;
    }

    .swiper-slide {
      opacity: 0 !important;
    }

    .swiper-slide-active {
      opacity: 1 !important;
    }
  }

  .swiper-pagination {
    --swiper-pagination-color: var(--theme-color-yamamay-man);
    --swiper-pagination-bullet-inactive-opacity: 0.25;
    --swiper-pagination-bullet-inactive-color: var(--theme-color-yamamay-man);
    position: relative;
    top: unset;
    left: unset;
    bottom: unset;
    right: unset;
    width: 85%;
    min-width: 15rem;
    margin-inline: auto;
    margin-top: 1.5rem;
    border-radius: 1rem;

    .swiper-pagination-bullet {
      flex: 1;
    }
  }
}

@media screen and (min-width: 1000px) {
  .tech-module {
    --_grid-template: "bgarea";
    --_carousel-grid-area: bgarea;
    --_icons-padding-inline: 1rem;
    --_carousel-width: 25vw;
    --_carousel-margin: 0.75rem 0.75rem calc(0.75rem + var(--component-bottom-spacing-addition));
  }
}