@media (max-width: 1050px) {

    .weather-details-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .hourly-forecast {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .forecast-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 760px) {

    .app-shell {
        width:
            min(
                100% - 20px,
                1180px
            );

        padding-top: 18px;
    }


    .app-header {
        align-items: center;
    }


    .brand p {
        display: none;
    }


    .search-wrapper {
        grid-template-columns:
            1fr
            56px;
    }


    .search-btn {
        grid-column:
            1 / -1;

        grid-row: 2;
    }


    .current-weather-card {
        padding: 22px;
    }


    .current-weather-top {
        flex-direction: column;
    }


    .condition-summary {
        min-width: 0;
    }


    .temperature-main {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .main-temperature {
        letter-spacing: -5px;
    }


    .temperature-extra {
        flex-direction: row;

        flex-wrap: wrap;

        gap: 18px;
    }


    .weather-details-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .hourly-forecast {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .forecast-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .forecast-card:last-child {
        grid-column:
            1 / -1;
    }


    .app-footer {
        flex-direction: column;

        align-items: center;

        text-align: center;
    }

}


@media (max-width: 480px) {

    .brand-icon {
        width: 48px;
        height: 48px;

        border-radius: 15px;
    }


    .brand h1 {
        font-size: 1.25rem;
    }


    .unit-toggle {
        min-width: 48px;
    }


    .current-weather-card,
    .hourly-section,
    .forecast-section,
    .favorites-section {
        padding: 18px;
    }


    .main-temperature {
        font-size: 4.8rem;
    }


    .weather-details-grid {
        grid-template-columns: 1fr;
    }


    .hourly-forecast {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .forecast-grid {
        grid-template-columns: 1fr;
    }


    .forecast-card:last-child {
        grid-column: auto;
    }


    .section-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .welcome-state,
    .state-card {
        padding:
            44px
            18px;
    }

}