/* #home-logo {
  width: 33%;
} */

#home {
 
  .div1 {
    display: flex;
  }

  .groupy {
    display: flex;
    gap: 1rem; 
        
    a {
      white-space: normal;
      text-decoration: none;
    }

    > * {
      flex: 1 0 0;
      padding: 1rem;
      border-radius: 1rem;
      background-color: var(--color-logoDark);
      box-shadow: 0 0 5px var(--color-logoDark);

      color: white;
      text-align: center;

      &:hover {
        box-shadow: 0 0 5px var(--color-logoHeart);
      }

      .frame {
        height: 100%;
        border-radius: .5rem;
        padding: 1rem;
        padding-bottom: 1.2rem;
        border: .5px white solid;
      }

      h1 {
        font-size: 1.75rem;
        line-height: 1.7rem;
        margin: 0;
        margin-bottom: 1rem;
        font-family: "BCRegular";
      }

      p {
        margin: 0;
        font-family: "BCRegular";
        /* color: var(--color-logoDark); */
      }
    }
  }

  .shoutout {
    
    /* margin-top: 6rem; */
    margin: 6rem auto 0rem;
    /* background: linear-gradient(30deg, var(--color-logoLight), white 25%, var(--color-logoLight)); */

    .last-line {
      margin-top: 2rem;
    }

    p {
      margin: .5rem 0;
      /* margin: 0;
      padding: 2rem;
      border-width: 3px;
      border-style: solid;
      border-color: var(--color-logoDark);
      border-color: white;
      border-radius: 1rem; */
    }

  }

  ol#list-of-reasons {
    list-style: none;

    li {
      margin-bottom: .5rem;
    }
  }
}

/* MOBILE */
@media (max-width: 600px) {

  #home {    

    .div1 {
      flex-direction: column-reverse;      
      gap: 1rem;
  
      .div1-right {
        img {
          width: 100%;
        }
      }
    }

    .groupy {
      flex-direction: column;
    }
    .shoutout {
      width: 80%;
  
      .last-line span.desktop {
        display: none;
      }
  
      .oneCard {
        margin: 1rem auto;
      }
    }
  
  }

}

/* DESKTOP */
@media (min-width: 600px) {

  #home {

    .div1 {
      gap: 4rem;
  
      .div1-left {}
      .div1-right {
        flex: 0 0 30vw;
        img {
          margin-top: -5rem;
          border-radius: 1rem;
          width: 100%;
        }
      }
    }
  
    .shoutout { 
      --card-basis: .35vw;

      display: flex;
      gap: 3rem;
      width: 80%;
  
      .last-line {
        text-align: right;
        
        span.mobile {
          display: none;
        }
      }
    }    
  }

}