/* Mobile (phones) */
@media (max-width: 600px) {
    /* Styles for small screens */
    #large-menu {
      display: none !important;
    }
    #mobile-menu {
      display: block !important;
    }
    #main-img::after {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 5%, hsl(var(--background)) 80%);
    }
    #main-img > img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: top;
    }
    #main-img-desc {
        left:0;
        padding: 20px;
        height: 85vh;
        width:100%; 
    }
    #main-img-desc > h1 {
        font-size: 42px;
    }
    #main-img-desc > p {
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        font-size: 16px;
        line-height: 1.35;
    }
    .arrows {
        display: none;
    }
    #featured > div {
        margin-top: 50px;
    }
    #featured-header > h1 {
        padding: 10px;
        margin-bottom: 10px;
    }
    .swiper {
        height: 400px;
    }
    .slider-item img {
        object-fit: cover;
        object-position: top;
    }
    .container {
        padding: 0px;
    }
    .iframe {
        border-radius: 0px;
        overflow: hidden;
        height: 400px;
    }
    .servers {
        margin: 25px;
    }
    .tv-episodes {
        padding: 25px;
    }
    .episode {
        display: flex;
        flex-direction: column;
        background-color: transparent;
        height: 100%;
    }
    .episode.active {
        border: transparent;
    }
    .episode > img {
        width: 100%;
        height: max-content;
        border-radius: 8px;
        object-fit: cover;
        object-position: top;
    }

    .episode img.active {
        border-radius: 8px;
        border: 3px solid hsl(var(--secondary));
    }
    .episode-info > p {
        display: none;
    }
    .search-bar {
        width: 100%;
    }
    .results {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 5px;
    }
    div.k > h1 {
        color: white;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 12px;
    }
}

/* Tablet (portrait & landscape) */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Styles for tablets */
    #main-img-desc {
        left:0;
        padding: 20px;
        height: 80vh;
        width:80%; 
    }
    .arrows {
        display: none;
    }
    #featured > div {
        margin-top: 50px;
    }
    .results {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 5px;
    }
    div.k > h1 {
        color: white;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 15px;
    }
}

/* Desktop (laptops and larger) */
@media (min-width: 1025px) {
  /* Styles for desktops */
  #featured {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 150px;
  }
}