*{
    box-sizing:border-box;
}

body{

    margin:0;
    background:#f7f8fa;

    font-family:"Inter",sans-serif;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:40px 20px 60px;

}

.logo{

    width:190px;
    max-width:70vw;

    margin-bottom:35px;

}

.layout{

    width:100%;
    max-width:1450px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;

    gap:28px;
    align-items:start;

}

.main-content{

    width:100%;

}

.cards{

    width:100%;

    display:grid;
    gap:20px;

    grid-template-columns:1fr;

}

.card{

    background:white;

    border-radius:20px;

    min-height:110px;

    display:flex;
    justify-content:center;
    align-items:center;

    text-decoration:none;
    color:#222;

    cursor:pointer;

    box-shadow:0 10px 22px rgba(0,0,0,.06);

    transition:.25s;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 38px rgba(0,0,0,.12);

}

.card-logo{

    width:120px;
    height:auto;

    object-fit:contain;

    transition:transform .25s ease;

}

.card:hover .card-logo{

    transform:scale(1.08);

}

.card h2{

    margin:0;

    font-size:1.45rem;
    font-weight:600;

}

.project-card{

    cursor:default;

}

.project-card:hover{

    transform:none;

    box-shadow:0 10px 22px rgba(0,0,0,.06);

}

.project-card:hover .card-logo{

    transform:none;

}

.card-spacer{

    display:none;

}

/* ---------- Sidebar ---------- */

.sidebar{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.panel{

    background:#fff;

    border-radius:20px;

    padding:20px;

    box-shadow:0 10px 22px rgba(0,0,0,.06);

}

.panel h3{

    margin:0 0 18px;

    font-size:.95rem;

    color:#666;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.media-item{

    display:flex;
    align-items:flex-start;

    gap:14px;

    margin-bottom:18px;

    text-decoration:none;

    color:#222;

    transition:opacity .2s ease;

}

.media-item:hover{

    opacity:.85;

}

.media-item:last-child{

    margin-bottom:0;

}

.media-item img{

    width:60px;
    height:90px;

    object-fit:cover;

    border-radius:8px;

    flex-shrink:0;

    box-shadow:0 2px 8px rgba(0,0,0,.12);

}

.media-info{

    flex:1;
    min-width:0;

}

.media-info strong{

    display:block;

    font-size:1rem;

    line-height:1.25;

    margin-bottom:4px;

}

.author{

    font-size:.9rem;

    color:#666;

    margin-bottom:6px;

}

/* ---------- Ratings ---------- */

.movie-rating{

    font-size:.9rem;

    color:#666;

    line-height:1.2;

}

.book-rating{

    margin-top:2px;

    font-size:1rem;

    color:#f5b301;

    letter-spacing:1px;

    line-height:1.2;

}

/* ---------- Responsive ---------- */

@media (min-width:768px){

    .cards{

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

    }

}

@media (min-width:1100px){

    .cards{

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

    }

    .card-spacer{

        display:block;
        visibility:hidden;

    }

}

@media (max-width:1200px){

    .layout{

        grid-template-columns:1fr;

    }

}