.offer {
  & .offer__content {
    padding: 40px var(--wp--preset--spacing--40);
    gap: 32px;
  }

  & .offer__title {
    /* order set in mobile no matter where it is placed in the cms */
    order: -2;
  }

  & .offer__image {
    display: flex;
    background: var(--wp--preset--color--white);
    /* order set in mobile no matter where it is placed in the cms */
    order: -1;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    max-width: 330px;
    margin: 32px auto;
    box-shadow: 4px 4px 4px -1px #0000001f;
    border-radius: 4px;
    transform: rotate(-2deg);
    padding: 20px 20px 38px 20px;

    & img {
      width: 100%;
      height: auto;
      aspect-ratio: 248 / 276;
      display: block;
      object-fit: cover;
    }

    & figcaption {
      margin: 8px 0 0 0;
      font-family: Paprika;
      color: var(--wp--preset--color--primary);
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-align: center;
    }
  }

  & ul {
    list-style: none;
    padding-left: 0;

    & li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;

      &::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18ZM8.76822 12.6402L13.7682 6.64018L12.2318 5.35982L7.9328 10.5186L5.70711 8.29289L4.29289 9.70711L7.29289 12.7071L8.0672 13.4814L8.76822 12.6402Z' fill='%230369B2'/%3E%3C/svg%3E");
        position: absolute;
        left: 0;
        top: 3px;
      }
    }
  }

  & .offer__cta {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;

    @media (min-width: 1024px) {
      width: max-content;
      margin: 0;
    }

    & .wp-block-button {
      width: 100%;

      & a {
        width: 100%;
      }
    }

    &.offer__cta--mobile a {
      background: transparent none;
      background-color: var(--wp--preset--color--white);
      border-color: var(--wp--preset--color--primary);
      border-width: 2px;
      border-style: solid;
      color: var(--wp--preset--color--primary);
      padding-top: 0.667em;
      padding-right: 1.33em;
      padding-bottom: 0.667em;
      padding-left: 1.33em;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    & .offer__content {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      & .offer__image {
        width: 280px;
        margin: 0;
        order: -2;
      }
      & .offer__title {
        width: calc(100% - 315px);
        margin: 0;
        order: -1;
      }

      & .offer__col-1,
      & .offer__col-2 {
        width: 47%;
      }
    }
  }

  @media (min-width: 1024px) {
    & .offer__content {
      display: grid;
      grid-template-columns: 280px 1fr 370px;
      grid-template-rows: auto auto auto;
      gap: 20px;

      & .offer__image {
        width: 100%;
        grid-column: 1 / 2;
        grid-row: 1 / 5;
        margin: 0;
      }

      & .offer__title {
        padding-left: 20px;
        grid-column: 2 / 4;
        grid-row: 1 / 2;
      }

      & .offer__col-1 {
        padding-left: 20px;
      }

      & .offer__cta {
        grid-column: 2 / 4;
        grid-row: 3 / 4;
        justify-self: center;
      }
    }
  }

  &.offer--inverted {
    padding: 75px var(--wp--preset--spacing--40) 80px var(--wp--preset--spacing--40);

    & ul {
      & li {
        &::before {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.35059 18C14.3211 18 18.3506 13.9706 18.3506 9C18.3506 4.02944 14.3211 0 9.35059 0C4.38002 0 0.350586 4.02944 0.350586 9C0.350586 13.9706 4.38002 18 9.35059 18ZM9.11881 12.6402L14.1188 6.64018L12.5824 5.35982L8.28339 10.5186L6.05769 8.29289L4.64348 9.70711L7.64348 12.7071L8.41778 13.4814L9.11881 12.6402Z' fill='white'/%3E%3C/svg%3E");
        }
      }
    }

    & .offer__content {
      & .offer__title {
        padding: 0px;
      }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
      & .offer__content {
        & .offer__image {
          order: -1;
        }
        & .offer__title {
          order: -2;
        }
    }
  }


  @media (min-width: 1024px) {
    & .offer__content {
      grid-template-columns: 1fr 370px 280px;

      & .offer__image {
        grid-column: 3 / 4;
        transform: rotate(2deg);
      }

      & .offer__title {
        grid-column: 1 / 3;
      }

      & .offer__col-1 {
        padding-left: 0px;
      }

      & .offer__cta {
        grid-column: 1 / 3;
        justify-self: center;
      }
    }
  }
}