.hero {
  inner-wrapper {
    padding-block-end: 0;
  }
  
  picture {
    padding-block-end: var(--sp-40);
    border-block-end: var(--border);
  }
}

.contact-info {
  container: contact-info / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-20);
    padding-block: var(--sp-40);

    h2 {
      grid-column: span 3;
      margin-block-end: 0;
    }
    
    address {
      grid-column: 4 / span 6;
    }

    picture {
      grid-column: 11 / span 2;
      max-width: var(--sp-330);
    }

    @container (inline-size < 71.875rem) {
      h2 {
        grid-column: span 12;
      }

      address {
        grid-column: span 9;
      }
    }

    @container (inline-size < 50rem) {
      address info-field {
        flex-direction: column;
        align-items: flex-start;
      }

      address {
        grid-column: span 12;
      }
      
      picture {
        grid-column: span 12;
      }
    }
  }
}

.send-email {
  container: send-email / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--sp-20);
    border-block-start: var(--border);
    padding-block-start: var(--sp-40);

    h2 {
      margin-block-end: var(--sp-20);
    }

    @container (inline-size < 64rem) {
      grid-template-columns: 1fr 3fr;
    }

    @container (inline-size < 40.625rem) {
      grid-template-columns: 1fr;
    }
  }
}