@import "./footer.css";
@import "./navbar.css";
@import "./About.css";
@import "./Cards.css";
@import "./LandingPage.css";
@import "./Gallery.css";

* {
  box-sizing: border-box;
  margin: 0;
}
body {
  scroll-behavior: smooth;
}
.clear {
  float: clear;
}
a,
a:visited,
a:active {
  text-decoration: none;
  color: black;
}

/*  ======================================================================================================= */

/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .about {
    grid-template-columns: 1fr;
  }
  .about-content .overlay {
    left: 40%;
    top: 7%;
  }
  .about-content p {
    width: 70%;
  }
  .hero-content {
    width: 50%;
  }
  .navbar ul {
    margin: 0;
    padding: 0;
  }
  .navbar h1 {
    margin: 0;
  }
  .footer {
    flex-direction: column;
    padding: 1rem;
  }
  .footer-social {
    flex-direction: row;
  }
}

@media (max-width: 767.98px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .about {
    grid-template-columns: 1fr;
  }
  .about-content .overlay {
    left: 40%;
    top: 7%;
  }
  .about-content p {
    width: 70%;
  }
  .hero-content {
    width: 50%;
  }
  .navbar ul {
    margin: 0;
    padding: 0;
  }
  .navbar h1 {
    margin: 0;
  }
}