@layer layout {
  .grid {
    padding-block: 6rem;

    @media (width < 45rem) {
      padding-block: 3rem;
    }
  }

  .image {
    position: relative;

    figure, picture {
      block-size: 100%;
    }

    img {
      block-size: 100%;
      
      object-fit: cover;
    }

    .contact {
      position: absolute;
      inset-inline-end: 1.5rem;
      inset-block-end: 1.5rem;
      inline-size: 75%;
      padding: 1.5rem;

      background-color: oklch(from var(--color-neutral) calc(l - 0.2) c h / 0.7);
      
      z-index: 1;

      @media (width < 50rem) {
        inline-size: calc(100% - 3rem);
      }

      @media (width < 45rem) {
        inset: auto 0 0 0;
        inline-size: 100%;
      }
    }
  }

  .form {
    padding-block: 1.5rem;
  
    @media (width > 45rem) {
      padding-inline: 1.5rem;
  
      background-color: oklch(from var(--color-neutral) calc(l + 0.61) c h);
    }
  }

  .row {
    display: flex;
    gap: 1.5rem;

    @media (width < 65rem) {
      flex-direction: column;
      gap: 0;
    }
  }

  .w-1\/2 {
    @media (width > 65rem) {
      inline-size: 50%;
    }
  }

  textarea {
    padding-block: 0.5rem;
    min-block-size: 9lh;
  }

  .map {
    block-size: 400px;
  }

  .honeypot {
    position: absolute;
    left: -9999px;
  }
}