aside.mobile {
  display: none;
}

@media only screen and (max-width: 1080px) {

  body {
    flex-direction: column;
  }

  h3 {
    font-size: var(--size-large);
  }

  div { --placeholder: auto; }

    div.media div {
      mask-image: linear-gradient(90deg, black 60%, transparent);
    }

  img { --placeholder: auto; }

    h3 + img[src="/assets/images/bullet-white.svg"] {
      height: calc(var(--size-large) / 2.00);
      left: calc(-1.00 * (var(--size-large) / 4.00));
      top: calc(var(--size-large) / 3.50);
      width: calc(var(--size-large) / 2.00);
    }

    img[src="/assets/images/arrow.svg"] {
      height: var(--size-large);
      padding: var(--size-large);
      top: calc(50% - var(--size-large) - (var(--size-large) / 2.00));
    }

  p {
    font-size: var(--size-medium);
  }

  aside { --placeholder: auto; }

    aside.desktop {
      display: none;
    }

    aside.mobile {
      display: flex;
    }

  input, textarea {
    font-size: var(--size-small);
    padding: var(--size-small) !important;
  }

}

@media only screen and (max-width: 640px) {

  button { --placeholder: auto; }

    aside.mobile button {
      font-size: var(--size-medium);
      padding: var(--size-medium) var(--size-large);
    }

  input, textarea {
    font-size: var(--size-medium);
    padding: var(--size-medium) !important;
  }

  nav { --placeholder: auto; }

    aside.mobile nav {
      font-weight: 400;
      letter-spacing: -0.025em;
    }

}