.job-offer {
  padding: 40px 0;

  @media (min-width: 1024px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-tempalte-rows: repeat(6, auto); */
    column-gap: 40px;

    & .job-offer__picture {
      grid-row: 1/4;
      grid-column: 2/3;
    }

    & .job-offer__text-box--benefits,
    & .job-offer__text-box--downloadables {
      grid-column: 2/3;
    }

    & .job-offer__text-box--tasks {
      grid-row: 4/6;
    }
  }

  & .job-offer__title {
    margin-bottom: 8px !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;

    @media (min-width: 1024px) {
      margin-bottom: 25px !important;
      font-size: 28px;
      line-height: 38px;
      letter-spacing: 0.02em;
    }
  }

  & .job-offer__text-box {
    margin-bottom: 24px !important;

    &:last-child {
      margin-bottom: 0 !important;
    }

    & .job-offer__text-box-title {
      margin-bottom: 16px;
      color: var(--wp--preset--color--primary);
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      text-transform: uppercase;

      @media (min-width: 1024px) {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 24px;
      }
    }

    & p {
      margin-bottom: 12px;
      font-size: 14px;
      line-height: 17.6px;

      @media (min-width: 1024px) {
        margin-bottom: 18px;
        font-size: 16px;
        line-height: 24px;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    & ul {
      list-style: none;
      padding-left: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;

      & li {
        position: relative;
        padding-left: 30px;
        font-size: 14px;
        line-height: 17.6px;

        @media (min-width: 1024px) {
          font-size: 16px;
          line-height: 24px;
        }

        &::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;
        }
      }
    }

    &.job-offer__text-box--tasks {
      & .job-offer__text-box-title {
        @media (min-width: 1024px) {
          margin-bottom: 16px;
        }
      }
    }

    &.job-offer__text-box--downloadables {
      display: flex;
      flex-direction: column;
      gap: 20px;

      @media (min-width: 1024px) {
        flex-direction: row;
        gap: 20px;
        align-items: center;
        align-self: end;
      }
    }
  }

  & .job-offer__picture {
    width: 100%;
    height: 240px;
    margin: 0 auto 24px auto !important;
    max-width: 360px;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    & .components-resizable-box__container {
      width: 100% !important;
      height: 100% !important;
    }

    @media (min-width: 1024px) {
      width: 100%;
      height: 265px;
      margin: 0;
      max-width: 100%;
    }
  }

  & .job-offer__contact-cta {
    width: 100%;
    max-width: 350px;
    margin: 0 auto !important;

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

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

      & a {
        display: flex;
        justify-content: center;
        gap: 8px;
        items-align: center;
        width: 100%;
      }
    }
  }
}