.image-with-card {
  align-items: center;
  background-color: var(--wp--preset--color--white);
  display: grid;
  grid-template-areas: "stack";
  padding-block: 1rem;
  max-width: 1400px;
  margin: 0 auto;

  @media (max-width: 782px) {
    background-color: var(--wp--preset--color--background);
    display: block;
    padding-block: 2rem;
  }

  & > .wp-block-image {
    grid-area: stack;

    & img {
      height: 100%;
    }
  }

  & .image-with-card__card {
    grid-area: stack;
    padding: 2rem;
    background-color: var(--wp--preset--color--white);
    width: 75%;
    border-radius: 1rem;
    margin: 2rem !important;

    @media (max-width: 782px) {
      background: none;
      margin: 2rem auto !important;
      padding: 0;
      width: auto;
    }

    @media (min-width: 1024px) {
      width: 40%;
      padding: 2rem;
      margin: 4rem !important;
    }

    @media (min-width: 1280px) {
      padding: 4rem;
    }

    @media (min-width: 1440px) {
      margin: 5rem !important;
      max-width: 32.75rem;
      padding: 5rem;
    }
  }
}