.contact {
  --contact-radius: var(--radius-3xl);
  --contact-gap: var(--gap-md);

  --contact-padding-y: var(--padding-xs);
  --contact-padding-x: var(--padding-xs);

  display: flex;
  flex-direction: column-reverse;
  border: var(--element-border);
  border-radius: var(--contact-radius);
  overflow: hidden;

  @media (min-width: 768px) {
    flex-direction: row-reverse;
    width: 100%;

    --contact-radius: var(--radius-4xl);
    --contact-gap: var(--gap-lg);
    --contact-padding-y: var(--padding-md);
    --contact-padding-x: var(--padding-md);
  }

  .contact-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;

    @media (min-width: 768px) {
      width: 40%;
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .contact-content {
    container-type: inline-size;
    container-name: contact-content;
    padding: var(--contact-padding-y) var(--contact-padding-x);
    background-color: var(--element-bg);
    color: var(--element-text);

    @media (min-width: 768px) {
      width: 60%;
    }

    address {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    a {
      display: inline-block;
      max-width: 20ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      @container contact-content (min-width: 200px) {
        max-width: 24ch;
      }

      @container contact-content (min-width: 300px) {
        max-width: 32ch;
      }
    }
  }

  .contact-info-footer {
    margin-top: var(--contact-gap);
  }
}