ul.class-list {
    display: flex;
    gap: 2%;
    flex-wrap: wrap;
    margin: 2% 0;
}

.class {
    width: 49%;
    display: flex;
    align-items: center;
    background: #FFF3FA;
    padding: 1%;
    border-radius: 10px;
    margin-bottom: 2%;
    border: solid 2px #FFB5DF;
}

.class-photo img {
    border-radius: 7px;
}

.class-photo {
    width: 45%;
}

.class-info {
    width: 51%;
    margin-left: 4%;
}

.class-name {
    font-size: 1.1em;
    margin-bottom: 4%;
}

.class-detail {}

.class-detail dt {
    background: #D4599F;
    color: #fff;
    font-size: 0.85em;
    float: left;
    padding: 0.2% 0;
    border-radius: 100px;
    margin-right: 15px;
    width: 6em;
    text-align: center;
    clear: both;
    margin-bottom: 3%;
}

.class-detail dd {
    float: left;
    width: calc(100% - 6em - 1px);
    margin-bottom: 3%;
}

@media print,
screen and (max-width:1366px) {
    .class-detail dt {
        margin-bottom: 1%;
    }

    .class-detail dd {
        width: 100%;
        padding-left: 1em;
    }

    .class-photo {
        width: 50%;
    }

    .class-info {
        width: 46%;
    }
}

@media print,
screen and (max-width:960px) {
    .class {
        flex-direction: column;
    }

    .class-photo {
        width: 100%;
    }

    .class-info {
        width: 90%;
        margin: 5%;
    }
}

@media screen and (max-width:580px) {
    .class {
        width: 100%;
        margin-bottom: 5%;
    }
}