body {
    margin: 0;
    font-family: "Times New Roman", Times, serif;
    background: white;
}

input[type="radio"] {
    display: none;
}

.container {
    min-height: 100vh;
    padding: 2rem;

    display: flex;
    gap: 4rem;

    align-items: flex-start;
}

/* LEFT SIDE */

.sidebar {
    min-width: 220px;

    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.works-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.works-list label {
    cursor: pointer;
    opacity: .5;
    transition: .2s;
}

.works-list label:hover {
    opacity: 1;
}

#work1:checked ~ .sidebar .works-list label[for="work1"],
#work2:checked ~ .sidebar .works-list label[for="work2"],
#work3:checked ~ .sidebar .works-list label[for="work3"],
#work4:checked ~ .sidebar .works-list label[for="work4"] {
    opacity: 1;
}

.site-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-nav a {
    text-decoration: none;
    color: black;
    opacity: .5;
    transition: .2s;
}

.site-nav a:hover {
    opacity: 1;
}
.works-list label:hover {
    opacity: 1;
}

/* active title */

#work1:checked ~ .works-list label[for="work1"],
#work2:checked ~ .works-list label[for="work2"],
#work3:checked ~ .works-list label[for="work3"],
#work4:checked ~ .works-list label[for="work4"],
#work5:checked ~ .works-list label[for="work5"],
#work6:checked ~ .works-list label[for="work6"],
#work7:checked ~ .works-list label[for="work7"],
#work8:checked ~ .works-list label[for="work8"],
#work9:checked ~ .works-list label[for="work9"],
#work10:checked ~ .works-list label[for="work10"],
#work11:checked ~ .works-list label[for="work11"],
#work12:checked ~ .works-list label[for="work12"],
#work13:checked ~ .works-list label[for="work13"],
#work14:checked ~ .works-list label[for="work14"],
#work15:checked ~ .works-list label[for="work15"]
 {
    opacity: 1;
}

/* RIGHT SIDE */

.viewer-section {
    flex: 1;
}

.viewer {
    width: 100%;
    max-width: 900px;
    height: 70vh;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* images */

#work1:checked ~ .viewer-section .viewer {
    background-image: url("work1.jpg");
}

#work2:checked ~ .viewer-section .viewer {
    background-image: url("work2.jpg");
}

#work3:checked ~ .viewer-section .viewer {
    background-image: url("work3.jpg");
}

#work4:checked ~ .viewer-section .viewer {
    background-image: url("work4.jpg");
}

#work5:checked ~ .viewer-section .viewer {
    background-image: url("work5.jpg");
}

#work6:checked ~ .viewer-section .viewer {
    background-image: url("work6.jpg");
}

#work7:checked ~ .viewer-section .viewer {
    background-image: url("work7.jpg");
}

#work8:checked ~ .viewer-section .viewer {
    background-image: url("work8.jpg");
}

#work9:checked ~ .viewer-section .viewer {
    background-image: url("work9.jpg");
}

#work10:checked ~ .viewer-section .viewer {
    background-image: url("work10.jpg");
}

#work11:checked ~ .viewer-section .viewer {
    background-image: url("work11.jpg");
}

#work12:checked ~ .viewer-section .viewer {
    background-image: url("work12.jpg");
}

#work13:checked ~ .viewer-section .viewer {
    background-image: url("work13.jpg");
}

#work14:checked ~ .viewer-section .viewer {
    background-image: url("work14.jpg");
}

#work15:checked ~ .viewer-section .viewer {
    background-image: url("work15.jpg");
}
/* descriptions */

.info {
    display: none;
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

#work1:checked ~ .viewer-section .info1 {
    display: block;
}

#work2:checked ~ .viewer-section .info2 {
    display: block;
}

#work3:checked ~ .viewer-section .info3 {
    display: block;
}

#work4:checked ~ .viewer-section .info4 {
    display: block;
}

#work5:checked ~ .viewer-section .info5 {
    display: block;
}

#work6:checked ~ .viewer-section .info6 {
    display: block;
}

#work7:checked ~ .viewer-section .info7 {
    display: block;
}

#work8:checked ~ .viewer-section .info8 {
    display: block;
}

#work9:checked ~ .viewer-section .info9 {
    display: block;
}

#work10:checked ~ .viewer-section .info10 {
    display: block;
}

#work11:checked ~ .viewer-section .info11 {
    display: block;
}

#work12:checked ~ .viewer-section .info12 {
    display: block;
}

#work13:checked ~ .viewer-section .info13 {
    display: block;
}

#work14:checked ~ .viewer-section .info14 {
    display: block;
}

#work15:checked ~ .viewer-section .info15 {
    display: block;
}

/* mobile */

@media (max-width: 768px) {

    .container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    /* IMAGE ON TOP (dominant) */
    .viewer-section {
        width: 100%;
    }

    .viewer {
        width: 100%;
        height: 55vh;
    }

    /* BOTTOM AREA (works + description side by side) */
    .sidebar,
    .viewer-section {
        width: 100%;
    }

    /* stack layout under image */
    .container {
        display: flex;
        flex-direction: column;
    }

    /* create 2-column block under image */
    .container::after {
        content: "";
        display: block;
    }

    /* force sidebar under image */
    .sidebar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
        min-width: unset;
    }


   .works-list {
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: 2rem;
    row-gap: 0.4rem;
    width: max-content;
  }

  .works-list label {
    display: block;
  }
}

    .works-list {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    .site-nav {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    /* description next to sidebar */
    .viewer-section {
        display: flex;
        flex-direction: column;
    }

    .info {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-top: 0.5rem;
    }
}