/* ---------- GENERAL ---------- */

.homepage {

    max-width: 1400px;
    margin: auto;
    padding: 2rem;

}

.hero {

    text-align: center;
    margin-bottom: 2rem;

}

.hero h1 {

    margin-bottom: .25rem;
    font-size: 3rem;

}

.hero p {

    color: #777;

}

/* ---------- THREE COLUMN LAYOUT ---------- */

.columns {

    display: grid;
    grid-template-columns: 220px 1fr 280px;
    gap: 2rem;
    align-items: start;

}

/* ---------- SIDEBARS ---------- */

.sidebar {

    border: 1px solid #60626b;
    padding: 1rem;
    border-radius: 8px;
    position: sticky;
    top: 2rem;

}

.sidebar h2 {

    margin-top: 0;

}

.sidebar ul {

    list-style: none;
    padding-left: 0;

}

.sidebar li {

    margin-bottom: .5rem;

}

.sidebar a {

    text-decoration: none;

}

.sidebar a:hover {

    text-decoration: underline;

}

/* ---------- CONTENT ---------- */

.content {

    display: flex;
    flex-direction: column;
    gap: 2rem;

}

.content section {

    border: 1px solid #60626b;
    padding: 1.5rem;
    border-radius: 8px;

}

/* ---------- FOOTER ---------- */

footer {

    margin-top: 3rem;
    text-align: center;
    color: #777;

}

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .columns {

        grid-template-columns: 1fr;

    }

    .sidebar {

        position: static;

    }

}


.page {

    max-width: 1400px;
    margin: auto;
    padding: 2rem;

}

.music-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;

}

.album {

    border: 1px solid #aaa;
    padding: 1rem;
    background: #d6d6c3;

}

.album h3 {

    margin-top: 0;

}

.album iframe {

    width: 100%;
    border: none;

}

@media (max-width: 1000px) {

    .music-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 700px) {

    .music-grid {

        grid-template-columns: 1fr;

    }

}

/* ---------- EMBEDDED GAME ---------- */

.page-content iframe {

    display: block;
    margin: 2rem auto;
    width: 100%;
    max-width: 1024px;
    height: 1044px;
    border: none;

}

/* ---------- IMAGES ---------- */

.page-content img {

    max-width: 100%;
    height: auto;

}

/* ---------- MOBILE ---------- */

@media (max-width: 1100px) {

    .page-content iframe {

        height: 700px;

    }

}

@media (max-width: 700px) {

    .single-page {

        padding: 1rem;

    }

    .page-content iframe {

        height: 500px;

    }

}

/* ============================
   ABOUT PAGE
============================ */

.about-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}

.about-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 800px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-photo {
        text-align: center;
    }

    .about-photo img {
        width: 250px;
    }
}