/* --- phones to tablets (320px -> 768px) --- */

@media screen and (max-width: 768px) {
  nav img {
    width: 90px;
  }
  .header-title {
    font-size: 40px;
  }

  .header-subtitle {
    font-size: 25px;
  }

  .section0-main-text {
    font-size: 16px;
  }

  .section0-column {
    padding: 2% 0 0 0;
    width: 100%;
  }

  .section0-column-text {
    border-left: none;

    text-align: center;
    margin: 0 1% 1% 1%;
  }

  .section0-column-text p {
    font-size: 15px;
  }

  .section-title {
    width: 70%;
    padding: 22% 0 0 0;
  }

  .section-title p {
    font-size: 25px;
  }

  .button1 {
    margin: 18% 0 18% 0;
    margin-left: 28%;
  }

  .left-column {
    width: 100%;
    margin: 26% 2.5% 0 2.5%;
  }

  .left-column p {
    font-size: 15px;
    text-align: left;
  }

  #section1-sideimg {
    background-image: none;
  }

  .right-column {
    min-height: 0;
  }

  ul {
    font-size: 15px;
    font-weight: 800;
    padding: 0 7vw 0 7vw;

    margin: 20px 0 0 0;
  }

  .section1-backgroundimg {
    background-image: linear-gradient(
        90deg,
        rgba(2, 0, 36, 1) 0%,
        rgba(52, 35, 166, 0.4125000341933649) 0%
      ),
      url(section1-sideimg.jpg);

    min-height: 70vh;
    padding-bottom: 80px;
  }

  .section1-backgroundimg p {
    width: 40%;
  }

  .column1 {
    width: 100%;
    padding-top: 100px;
  }
  .column2 {
    width: 100%;
    padding-top: 0;
  }
  .column3 {
    width: 100%;
    padding-top: 0;
  }
  .column4 {
    width: 100%;
    padding-top: 0;
  }
  .column5 {
    width: 100%;
    padding-top: 0;
  }

  .flip-card {
    width: 100%;
  }
}