/* =========================
   SEARCH PAGE
   ========================= */

.search-page {
    width: 100%;
}

.search-page h1 {
    margin: 0 0 20px;
}

/* Search form */

.search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
}

/* =========================
   SEARCH GROUP
   ========================= */

.search-results {
    width: 100%;
}

.search-group {
    width: 100%;
    margin: 0 0 30px;
}

.search-group h2 {
    margin: 0 0 12px;
}

/* =========================
   REAL SEARCH GRID
   ========================= */

.search-grid {
    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    grid-template-rows:
        repeat(2, auto) !important;

    grid-auto-flow: row !important;

    gap: 10px !important;

    width: 100% !important;

    box-sizing: border-box !important;

    align-items: start !important;
}

/* =========================
   SEARCH ITEM
   ========================= */

.search-grid > .search-item {
    display: block !important;

    position: relative !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    grid-column: auto !important;
    grid-row: auto !important;
}

/* =========================
   MOVIE CARD
   ========================= */

.search-grid > .search-item.search-movie {
    width: auto !important;
}

.search-grid > .search-item.search-movie .media-row {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* =========================
   GAME CARD
   ========================= */

.search-grid > .search-item.search-game {
    width: auto !important;
}

.search-grid > .search-item.search-game .gm-card-game {
    width: 100% !important;
    max-width: 100% !important;

    height: 180px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

.search-grid > .search-item.search-game .gm-card-game img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}

/* =========================
   SOFTWARE / APPS
   ========================= */

.search-grid > .search-item.search-software,
.search-grid > .search-item.search-app {
    width: auto !important;
}

.search-grid > .search-item.search-software .media-row,
.search-grid > .search-item.search-app .media-row {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* =========================
   TABLET
   ========================= */

@media (max-width: 1100px) {

    .search-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

    .search-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    .search-grid > .search-item.search-game .gm-card-game {
        height: 170px !important;
    }

}

/* =========================
   SMALL MOBILE
   ========================= */

@media (max-width: 450px) {

    .search-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .search-grid > .search-item.search-game .gm-card-game {
        height: 150px !important;
    }

}