*,
*::before,
*::after {
    box-sizing: border-box;
    text-rendering: auto;
    margin: 0;
    padding: 0;
    /* font-size: 1vw; */
    font-family: Arial, Helvetica, sans-serif;
    overflow: scroll;
}

/* .links {
    color: red; 
    font-size: 3vw;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    position: relative;
    padding: 2rem;
} */

.lg-logo {
  display: inline-block;
}

.sm-banner {
  display: none;
}

.lg-banner {
  display: flex;
  flex-direction: column;
  font-weight: 800;
}

.lg-logo {
  text-align: center;
  color: red;
  padding: 0 1rem;
  font-size: 8vw;
}

.sm-logo {
  text-decoration: none;
}

  /* background-color: aqua; */

nav a:hover {
    background-color: red;
}

.images {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      gap: 1rem;
      height: 50%;
}

@media screen and (max-width: 768px) {}
  .lg-banner {
      display: none;
  }

  .sm-banner {
      display: flex;
      justify-content: space-between;
      padding: 0 1rem;
      font-size: 8vw;
      font-weight: 800;
  }

  .sm-logo {
      color: red;
  }

  .sm-nav a {
      color: red;
      font-size: 5vw;
      font-weight: 800;
      text-decoration: none;
  }

 /* Three image containers (use 25% for four, and 50% for two, etc) */
 /* .column {
    float: left;
    width: 50%;
    padding: 5rem 0.3rem;
  } */
  
  /* Clear floats after image containers */
  /* .row::after {
    content: "";
    clear: both;
    display: table;
  }  */