@media screen and (max-width: 1023px) and (min-width: 768px) {
  :root {
    --w-column: 100px;
  }
  body {
    & .carousel {
      height: 60vh;
      & .list {
        & .item {
          & .content {
            & h2 {
              font-size: 5em;
            }
          }
        }
      }
    }
  }

  .business-card img {
    width: 20rem !important;
    height: 5rem;
    border: 0.5rem solid rgba(0, 0, 0, 0.1);
  }
}

@media screen and (max-width: 1500px) and (min-width: 1023px) {
  :root {
    --w-column: 100px;
  }
  body {
    & .carousel {
      height: 60vh;
      & .list {
        & .item {
          & .content {
            & h2 {
              font-size: 5em;
            }
          }
        }
      }
    }
  }

  .business-card img {
    width: 25rem !important;
    height: 8rem;
    border: 0.5rem solid rgba(0, 0, 0, 0.1);
  }
}

@media (min-width: 1200px) {
  .timeline > li {
    min-height: 170px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }
  .timeline > li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
  }
  .timeline > li .timeline-image h4 {
    margin-top: 40px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}

@media (min-width: 768px) {
  .timeline:before {
    left: 50%;
  }
  .timeline > li {
    min-height: 100px;
    margin-bottom: 100px;
  }
  .timeline > li .timeline-panel {
    float: left;
    width: 41%;
    padding: 0 20px 20px 30px;
    text-align: right;
  }
  .timeline > li .timeline-image {
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 13px;
    line-height: 18px;
    margin-top: 16px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 30px 20px 20px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .timeline > li {
    min-height: 150px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px;
  }
  .timeline > li .timeline-image {
    width: 150px;
    height: 150px;
    margin-left: -75px;
  }
  .timeline > li .timeline-image h4 {
    font-size: 18px;
    line-height: 26px;
    margin-top: 30px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 20px 20px;
  }
}
@media (max-width: 1500px) {
  .list {
    display: grid;    
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);    
    grid-template-areas:
      " item1     item2     item3    item4"
      " item1     item2     item3    item4";
    gap: 2rem;
  }
}

@media (max-width: 1200px) {
  .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      " item1     item2    "
      " item3     item4    ";
    gap: 2rem;
  }   
  .map-iframe{
    height: 40vh;
    width: 90%;
  }
}

@media (max-width: 768px) {
  .list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      " item1  "
      " item2  "
      " item3  "
      " item4  ";
    gap: 2rem;
  }
  .list .item-list .content {
    padding: 0.75rem;
    font-size: 0.9rem;
  } 
}

@media (max-width: 480px) {
  .list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      " item1  "
      " item2  "
      " item3  "
      " item4  ";
    gap: 2rem;
  }
  .list .item-list:hover img {
    transform: scale(1.05);
  }
  .navbar {
    backdrop-filter: none;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --w-column: 50px;
  }
  body {
    & .carousel {
      height: 100vh;
      & .list {
        & .item {
          & .content {
            justify-content: end;
            padding-bottom: 100px;
            & h2 {
              font-size: 5em;
            }
          }
          & figure {
            width: 110%;
            transform: translateY(0);
            top: 20px;
            left: -30px;
          }
        }
      }
      & .indicators {
        & .number {
          font-size: 10em;
          transform: translateX(50px);
          opacity: 0.5;
        }
      }
    }
  }
  .nav__links {
    display: none;
  }
  .nav-logo {
    display: none;
  }
  .business-card img {
    width: 70vw !important;
    height: 20rem;
    border: 0.5rem solid rgba(0, 0, 0, 0.1);
  }
  .owner-container {
    width: 100%;
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }

  .owner-profile {
    width: 100%;
  }
}