@use '_helper' as *;
@use '../base/typography' as *;

.home-icon-list {
  padding: 75px 0 40px;
  position: relative;
  z-index: 100;
  @include full-width();
  margin-bottom: 0;
  @include swipe($type: "watercolor", $vertPosOffset: calc(-1 * (100svw * 0.1)));
  margin-top: 0 !important;

  @media screen and (min-width: $break-medium) {
    padding-bottom: 60px;
    padding-top: 5vw;
  }

  @media screen and (min-width: $break-large) {
    padding-top: 5vw;
    padding-bottom: 100px;
  }

  &::before {
    z-index: 0;
  }

  &__inner {
    @include content-full();
    position: relative;
    z-index: 1;

    @media screen and (min-width: $break-medium) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      padding: 0;
    }

    @media screen and (min-width: $break-large) {
      gap: 40px 30px;
    }
  }

  &__item {
    display: grid;
    grid-template-columns: 40px auto;
    gap: 0 10px;
    margin-bottom: 25px;

    @media screen and (min-width: $break-medium) {
      margin-bottom: 0;
    }

    @media screen and (min-width: $break-large) {
      grid-template-columns: 70px auto;
      gap: 0 15px;
    }

    h2 {
      @extend h5;
      text-transform: none;
      font-size: rem(18px);
      margin: 0;
      color: $color-black;

      @media screen and (min-width: $break-medium) {
        font-size: rem(22px);
        line-height: 1.2;
      }

      @media screen and (min-width: $break-large) {
        font-size: rem(32px);
      }
    }

    p {
      margin-top: 5px;
    }

    h2,
    p {
      grid-column: 2;
    }
  }

  .icon-list__icon {
    margin: 0;
    color: $color-white;
    width: 40px;
    height: 40px;
    grid-row-end: 3;
    grid-row-start: 1;

    @media screen and (min-width: $break-large) {
      width: 70px;
      height: 70px;
    }

    svg {
      max-width: 24px;
      max-height: 24px;

      @media screen and (min-width: $break-large) {
        max-width: 42px;
        max-height: 42px;
      }
    }
  }
}