main {
    max-width: 1200px;
    margin: auto;
}

/********************
case
********************/

.case img {
    aspect-ratio: 2.5/1;
    object-fit: cover;
    max-width: 650px;    
}

@media (min-width:650px) {
    .case {
        display: flex;
        gap: 40px;
        align-items: center;
        justify-content: space-around;
    }
}

/********************
contents
********************/

.contents {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contents h2 {
    margin-top:30px;
    margin-bottom: 0;
}

.contents figure {
    margin: 0px;
}

.contents img {
    margin-top: 30px;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}

.contents hgroup p {
    font-size: 14px;
    color: #707070;
}
.contents figure .period {
    margin: 8px;
    color: #707070;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 16px;
}

.contents figure .title {
    margin-top: 0;
    margin-left: 8px;                          
    font-weight: 600;
    font-size: 18px; 
}

@media (min-width:650px) {
    .list-wr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (min-width:900px) {
    .list-wr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
    }
}