/*
 * Phones
 */
@media (max-width: 48em) {
  header {
    border: none;
    position: relative;
  }

  header.hide {
    transform: none;
  }

  .main {
    margin: 0;
  }

  .landing {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }

  .landing__text {
    position: absolute;
    inset: 0;
    padding: 0;
  }

  .landing__text h2 {
    font-size: 1.5em;
  }

  .landing__img {
    display: none;
  }

  .uam_logo {
    display: none;
  }

  .section4 {
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr;
  }

  .section4 > h2 {
    grid-column: 1;
    grid-row: 1;
    text-orientation: unset;
    writing-mode: unset;
  }

  .section4 .section4__buttons {
    grid-column: 1;
    grid-row: 2;
  }

  .section4 .section4__cards {
    grid-column: 1;
    grid-row: 3;
  }

  .section4 .container {
    box-sizing: border-box;
    scroll-snap-type: x mandatory;
    justify-content: space-around;
    gap: 10%;
  }

  .card {
    width: 80vw;
    height: 80vw;
    scroll-snap-align: center;
  }

  .card_link {
    display: none;
  }

  .card.active .card_link,
  .card:hover .card_link {
    display: none;
  }
}