.paragraph--type--map-hero {

  > .inner {
    padding: 3.75rem .9375rem;
    max-width: 1400px;
    margin: auto;

    @media screen and (min-width: 60em) {
      padding: 5rem 1.25rem;
    }

    @media screen and (min-width: 80em) {
      padding: 7.5rem 1.875rem;
    }

    @media screen and (min-width: 100em) {
      padding: 10rem 2.5rem;
    }
  }

  .content {
    margin-bottom: 2rem;
  }

  .field--name-field-map {
    aspect-ratio: 3/2;
    position: relative;

    * {
      height: 100%;
    }

    iframe {
      display: block;
      width: 100%!important;
      height: 100%!important;
    }
  }

  .field--name-field-button a {
    display: inline-block;
    position: relative;
    padding: 0.75em 3em;
    background: #0762d2;
    border: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.25s;
    text-transform: uppercase;

    &:hover {
      background: #0caef7;
    }
  }

  @media screen and (min-width: 60em) {
    .inner {
      display: flex;
      gap: 2.5rem;
    }

    .content {
      width: 40%;
      margin-bottom: 0;
    }

    .map {
      padding-left: 4rem;
      width: 60%;
    }
  }

  @media screen and (min-width: 80em) {
    .content {
      width: 30%;
    }

    .map {
      /* padding-left: 5rem; */
      width: 70%;
    }
  }
}