/* ************************ */
/* BELOW 1344px - Smaller desktops / laptops */
/* ************************ */
@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
    gap: 6.4rem;
  }
  .hero-title {
    font-size: 5.2rem;
  }
  .hero-mini {
    font-size: 2.6rem;
  }
  .logo-name {
    font-size: 4.2rem;
  }
  .main-nav-list {
    gap: 2.4rem;
  }
  .gallery-layout {
    grid-template-columns: 22rem 1fr;
    gap: 4.8rem;
  }
  .footer-container {
    gap: 3.2rem;
  }
}

/* ************************ */
/* BELOW 1200px - Landscape tablets / small laptops */
/* ************************ */
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
  .header {
    padding: 0 2.4rem;
  }
  .main-nav-list {
    gap: 2rem;
  }
  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.7rem;
  }
  .logo-name {
    font-size: 3.8rem;
  }
  .hero {
    gap: 4.8rem;
  }
  .hero-title {
    font-size: 4.8rem;
  }
  .hero-secondary {
    font-size: 4.4rem;
  }
  .about-box {
    padding: 7rem 10rem;
  }
  .popular-images {
    gap: 5.6rem;
  }
  .gallery-layout {
    grid-template-columns: 18rem 1fr;
  }
  .gallery-grid {
    grid-template-rows: 20rem 13rem 20rem;
  }
  .reviews-layout {
    gap: 2.4rem;
  }
  .footer-container {
    grid-template-columns: 1.2fr 1fr 1.2fr 1.2fr;
    gap: 2.4rem;
  }
  .footer-brand,
  .footer-col {
    padding: 0 2.4rem;
  }
}

/* ************************ */
/* BELOW 944px - Tablets */
/* ************************ */
@media (max-width: 59em) {
  html {
    font-size: 50%;
  }
  .header {
    height: 8rem;
  }
  .logo {
    height: 8rem;
  }
  .logo-name {
    font-size: 3.4rem;
  }
  .main-nav-list {
    gap: 1.6rem;
  }
  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.6rem;
  }

  .main-nav-link.nav-cta:link,
  .main-nav-link.nav-cta:visited {
    padding: 1rem 1.8rem;
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 6.4rem;
  }
  .hero-text {
    max-width: 80rem;
    margin: 0 auto;
  }
  .hero-img img {
    width: 65%;
  }
  .feature-content {
    justify-content: center;
  }

  .about-box {
    padding: 7rem 6rem;
  }
  .about-text {
    font-size: 1.8rem;
  }

  .popular-images {
    gap: 3.2rem;
  }
  .main-img {
    width: 28rem;
    height: 28rem;
  }
  .side-img {
    width: 18rem;
    height: 18rem;
  }

  .find-box {
    grid-template-columns: 1fr;
  }
  .find-item {
    max-width: 80rem;
    margin: 0 auto;
  }
  .find-map {
    max-width: 80rem;
    margin: 0 auto;
  }

  .gallery-layout {
    grid-template-columns: 1fr;
  }
  .gallery-logo-box {
    display: none;
  }

  .reviews-layout {
    grid-template-columns: 1fr;
  }
  .reviews-summary {
    max-width: 70rem;
    margin: 0 auto;
  }

  .footer-container {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 6.4rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 50rem;
  }
  .footer-col {
    padding: 0 2.4rem;
    margin: 0 auto;
  }
  .footer-col:first-of-type {
    border-left: none;
  }
}

/* ************************ */
/* BELOW 736px - Smaller tablets */
/* ************************ */
@media (max-width: 46em) {
  .heading-secondary {
    font-size: 3.6rem;
  }

  .title-form {
    width: 6.4rem;
  }

  .undertitle {
    margin-bottom: 6.4rem;
  }

  /* Mobile navigation */
  .btn-mobile-nav {
    display: block;
    z-index: 999;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(37, 29, 3, 0.98);
    border-bottom: 1px solid #e6c54d;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 4.8rem 0;

    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    transform: translateY(-2rem);
    transition: all 0.35s ease;
  }
  .main-nav-list {
    flex-direction: column;
    gap: 3.2rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2.4rem;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  /* Header */
  .main-nav-list {
    gap: 1.2rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.4rem;
  }

  .logo-name {
    font-size: 2.8rem;
  }

  .logo {
    height: 7.2rem;
  }

  .sticky .logo {
    height: 6.4rem;
  }

  .sticky .logo-name {
    font-size: 2.6rem;
  }

  /* Hero */
  .hero-title {
    font-size: 4.4rem;
  }

  .hero-mini {
    font-size: 2.4rem;
  }

  .hero-img img {
    width: 75%;
  }

  .feature-content {
    gap: 1.8rem;
  }

  .feature-item {
    gap: 1.2rem;
  }

  /* About */
  .about-box {
    padding: 9rem 10rem;
  }

  .upper-left,
  .bottom-right {
    width: 75%;
  }

  /* Popular */
  .popular-images {
    gap: 2.4rem;
  }

  .main-img {
    width: 24rem;
    height: 24rem;
  }

  .side-img {
    width: 13rem;
    height: 13rem;
  }

  .popular-arrow {
    width: 4rem;
    height: 4rem;
  }

  /* Gallery */
  .gallery-layout {
    gap: 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 14rem 9rem 14rem;
    gap: 1rem;

    grid-template-areas:
      "gal-1 gal-3 gal-5"
      "gal-1 gal-4 gal-6"
      "gal-2 gal-4 gal-7";
  }

  .gallery-item {
    min-height: 0;
  }
  .gal-1 img {
    object-position: center bottom;
  }

  .gal-2 img {
    object-position: center;
  }

  .gal-3 img {
    object-position: center;
  }

  .gal-4 img {
    object-position: center;
  }

  .gal-5 img {
    object-position: center 25%;
  }

  .gal-6 img {
    object-position: center 45%;
  }

  .gal-7 img {
    object-position: top;
  }

  /* Reviews */
  .reviews-section {
    padding-bottom: 12.8rem;
  }

  .reviews-subtitle {
    margin-top: 3.2rem;
  }

  /* Footer */
  .footer-container {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 6.4rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 50rem;
    text-align: center;
  }

  .footer-col {
    padding: 0 2rem;
  }

  .footer-col:first-of-type {
    border-left: none;
  }
}

/* ************************ */
/* BELOW 592px - Phones */
/* ************************ */
@media (max-width: 37em) {
  .container,
  .hero,
  .menu-container {
    padding: 0 2rem;
  }

  /* Header */
  .header {
    height: 7.2rem;
    padding: 0 2rem;
  }

  .logo {
    height: 9.2rem;
  }

  .logo-name {
    font-size: 3.2rem;
  }

  .divider {
    height: 3.6rem;
  }

  .sticky .header {
    height: 7.2rem;
  }

  .sticky .logo {
    height: 6.4rem;
  }

  .sticky .logo-name {
    font-size: 2.4rem;
  }

  .icon-mobile-nav {
    width: 4.2rem;
    height: 4.2rem;
  }

  /* General headings */
  .heading-secondary {
    font-size: 3.2rem;
    text-align: center;
  }

  .title-form {
    width: 6.8rem;
  }

  .undertitle-form {
    width: 12rem;
    margin-top: 0.4rem;
  }

  .undertitle {
    margin-bottom: 5.6rem;
  }

  /* Hero */
  .section-hero {
    padding: 4.8rem 0 8rem;
  }

  .hero {
    gap: 4.8rem;
  }

  .hero-title {
    font-size: 4.2rem;
  }

  .hero-mini {
    font-size: 2rem;
    margin-bottom: 2.4rem;
  }

  .hero-description {
    font-size: 1.8rem;
    line-height: 1.7;
  }

  .hero-img img {
    width: 90%;
  }

  .feature-content {
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
  }

  .feature-item {
    width: 22rem;
    justify-content: flex-start;
  }

  .features .divider {
    display: none;
  }

  .feature-icon-text {
    font-size: 1.8rem;
  }

  /* About */
  .section-about {
    padding: 8rem 0;
  }

  .about-box {
    padding: 7.4rem 3.4rem;
  }

  .upper-left,
  .bottom-right {
    width: 90%;
  }

  .about-text {
    font-size: 1.8rem;
    line-height: 1.8;
  }

  /* Popular Picks */
  .Popular-section {
    padding: 8rem 0;
  }

  .side-img {
    display: none;
  }

  .main-img {
    width: 27rem;
    height: 27rem;
  }

  .popular-arrow {
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
  }

  .popular-arrow-left {
    left: 0;
  }

  .popular-arrow-right {
    right: 0;
  }

  .popular-content h3 {
    font-size: 2.6rem;
  }

  .popular-content p {
    font-size: 1.8rem;
    padding: 0 5.2rem;
  }

  /* Menu */
  .menu-section {
    padding: 8rem 0;
  }

  .menu-main-img {
    max-width: 34rem;
  }

  .menu-thumb {
    width: 7.5rem;
    height: 10.5rem;
  }

  .menu-thumbnails {
    gap: 1.2rem;
  }

  /* Find us */
  .find-us-section {
    padding: 8rem 0;
  }

  .find-item {
    padding: 3.2rem 2.4rem;
  }

  .title {
    font-size: 2.2rem;
    text-align: center;
  }

  .find-description {
    gap: 1.6rem;
    font-size: 1.5rem;
    letter-spacing: 1px;
  }

  .find-icon,
  .social-icon {
    width: 3.6rem;
    height: 3.6rem;
  }

  .find-map {
    min-height: 36rem;
  }

  /* Gallery */
  .gallery-section {
    padding: 8rem 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 16rem 12rem 16rem 12rem;
    gap: 1rem;

    grid-template-areas:
      "gal-1 gal-3"
      "gal-1 gal-5"
      "gal-2 gal-4"
      "gal-6 gal-7";
  }

  /* Reviews */
  .reviews-section {
    padding: 8rem 0 12.8rem;
  }

  .reviews-subtitle {
    font-size: 1.6rem;
    margin-top: 2.4rem;
    margin-bottom: 4.8rem;
    padding: 0 2rem;
  }

  .reviews-border {
    padding: 4.8rem 2.4rem 3.2rem;
  }

  .score-number {
    font-size: 7.4rem;
  }

  .score-divider,
  .score-total {
    font-size: 3.6rem;
  }

  .reviews-card {
    padding: 2.4rem;
  }

  .reviews-header {
    flex-direction: column;
    gap: 1.2rem;
  }

  .reviews-text {
    font-size: 1.5rem;
  }

  /* Footer */
  .footer {
    padding: 8rem 0 1.6rem;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }

  .footer-brand {
    grid-column: auto;
    max-width: 34rem;
    width: 100%;
    justify-self: center;
    text-align: left;
  }

  .footer-brand .footer-logo {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }
  .footer-brand,
  .footer-col {
    padding: 0;
  }

  .footer-logo-name {
    text-align: left;
  }

  .footer-under-form {
    margin: 0.8rem 0 1.6rem;
  }

  .footer-description {
    text-align: left;
  }

  .footer-col {
    border-left: none;
    padding: 0;
    text-align: left;
    max-width: 34rem;
    width: 100%;
    justify-self: center;
  }

  .footer-title {
    text-align: left;
  }

  .footer-title-form {
    margin: 0.8rem 0 3.2rem;
  }

  /* Quick Links */
  .footer-list {
    align-items: flex-start;
  }

  .footer-list li {
    position: relative;
    padding-left: 2.4rem;
  }

  .footer-list li::before {
    display: block;
    content: ">";
    position: absolute;
    left: 0;
    color: #e6c54d;
    font-size: 1.6rem;
    line-height: 1;
  }

  /* Contact + Social */
  .footer-contact-item,
  .footer-social-item {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
    margin: 0 0 2.4rem;
  }

  .footer-icon,
  .footer-social-icon {
    flex-shrink: 0;
    margin-top: 0.3rem;
  }

  .footer-contact-item div,
  .footer-social-item div {
    text-align: left;
  }

  .footer-contact-item a:link,
  .footer-contact-item a:visited,
  .footer-social-item a:link,
  .footer-social-item a:visited {
    line-height: 1.5;
  }

  .footer-copy {
    margin-top: 4.8rem;
  }
}

/* @media (max-width: 768px) {
  .section-about {
    padding: 6.4rem 0;
  }

  .heading-secondary {
    font-size: 4rem;
  }

  .title-form {
    width: 5.8rem;
  }

  .undertitle {
    margin-bottom: 6.4rem;
  }

  .about-box {
    padding: 6rem 3.2rem;
    min-height: 24rem;
  }

  .upper-left,
  .bottom-right {
    width: 80%;
  }

  .about-text {
    padding: 0 6.2rem;
    font-size: 1.6rem;
    line-height: 1.7;
  }
}

@media (max-width: 768px) {
  .Popular-section {
    padding: 6.4rem 0;
  }

  .popular-images {
    gap: 2rem;
  }

  .main-img {
    width: 22rem;
    height: 22rem;
  }

  .side-img {
    width: 9rem;
    height: 9rem;
  }

  .popular-arrow {
    width: 4rem;
    height: 4rem;
    font-size: 2.4rem;
  }

  .popular-arrow-left {
    left: -1rem;
  }

  .popular-arrow-right {
    right: -1rem;
  }

  .popular-content h3 {
    font-size: 2.2rem;
  }

  .popular-content p {
    font-size: 1.6rem;
    padding: 0 2rem;
  }
}

@media (max-width: 768px) {
  .menu-main-img {
    max-width: 36rem;
  }

  .menu-thumb {
    width: 8rem;
    height: 11rem;
  }
} */