
@media screen and (min-width: 710px) {

    /* Home page */
    header {
        display: flex;
        justify-content: space-between
    }

    button#myButton {
        display: none;
    }

    nav {
        display: flex;
        flex-direction: column;
    }

    nav ul.menuLinks {
        display: flex;
        list-style: none;
    }

    ul.menuLinks li a {
        border-bottom: none;
        text-decoration: none;
        color: white;
        padding: 15px;
    }

    section.anime-section div.carousel div.anime-suggestion figure,
    section.marvel-section div.carousel div.marvel-suggestion figure {
        width: 270px;
        height: 440px;
    }

    section.anime-section div.anime-promotion figure a,
    div.marvel-promotion figure a {
        width: 380px;
    }

    section.anime-section div.anime-promotion figure a img,
    div.marvel-promotion figure a img {
        width: 250px;
    }

    section.anime-section div.carousel div.anime-suggestion figure.card a,
    section.marvel-section div.carousel div.marvel-suggestion figure a {
        height: 350px;
    }

    section.anime-section div.carousel div.anime-suggestion figure a h2,
    section.marvel-section div.carousel div.marvel-suggestion figure a h2 {
        font-size: 15px;
    }

    section.anime-section div.carousel div.anime-suggestion figure a img,
    section.marvel-section div.carousel div.marvel-suggestion figure a img {
        height: 200px;
    }

    /* Card Details Page */
    main div.card figure {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main div.card figure h2 {
        grid-column: 1 / 3;
    }

    main div.card figure img {
        grid-column: 1 / 2;
    }

    main div.card p {
        grid-column: 2 / 3;
        font-size: 15px;
    }

    /* Style comicsList page */
    main.comicsList div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1024px) {

    /* Home Page */
    main.home {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    section.anime-section div.anime-promotion figure a,
    div.marvel-promotion figure a {
        height: 500px;
    }

    section.anime-section div.carousel div.anime-suggestion figure,
    section.marvel-section div.carousel div.marvel-suggestion figure {
        height: 300px;
    }

    section.anime-section div.carousel div.anime-suggestion figure a img,
    section.marvel-section div.carousel div.marvel-suggestion figure a img {
        width: 180px;
    }

    section.anime-section,
    section.marvel-section {
        padding-bottom: 50px;
    }

    /* Card Details Page */
    main div.card figure {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main div.card figure h2 {
        grid-column: 1 / 3;
    }

    main div.card figure img {
        grid-column: 1 / 2;
    }

    main div.card p {
        grid-column: 2 / 3;
        font-size: 15px;
    }

    /* Style comicsList page */
    main.comicsList div {
        grid-template-columns: repeat(3, 1fr);
    }

    main.comicsList div figure {
        margin: 20px;
    }
}