.media-detail{
    display: flex;
    gap: var(--sp-lg);
    justify-content: center;
    align-items: center;
    max-width: var(--br-xl);
    margin: 0 auto;
    margin-bottom: var(--sp-md);
    flex-direction: column;
}

.media-detail.media-row{
    flex-direction: row;
    gap: var(--sp-xl);
}

.media-detail.media-row .media-detail-detail{
    align-items: start;
    justify-content: start;
}

.media-detail.media-row .media-detail-detail .head-detail-group .media-detail-title .text,
.media-detail.media-row .media-detail-detail .head-detail-group .media-detail-desc .text{
    text-align: start;
}

.media-detail.media-row .media-detail-detail .media-detail-cta{
    text-align: start;
    width: 100%;
}

.media-detail .media-detail-detail{
    flex: 0 0 calc(50% - var(--sp-lg));
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.media-detail-detail .head-detail-group .media-detail-title .text,
.media-detail-detail .head-detail-group .media-detail-desc .text{
    text-align: center;
}

.media-detail-detail .media-detail-cta{
    text-align: center;
    width: 100%;
}

.media-detail .media-detail-media{
    width: 100%;
    height: 532px;
}

.media-default.media-card-group{
    max-width: var(--br-xl);
    margin: 0 auto;
}

.media-card-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.media-card-list .card{
    flex: 0 0 calc(25% - var(--sp-sm));
    flex-grow: 1;
}

@media (max-width: 991px){
    .media-detail.media-row{
        flex-direction: column;
    }

    .media-card-list .card{
        flex: 0 0 calc(50% - var(--sp-sm));
    }

    .media-detail .media-detail-detail{
        align-items: start;
    }

    .media-detail-detail .head-detail-group .media-detail-title .text, 
    .media-detail-detail .head-detail-group .media-detail-desc .text {
        text-align: start;
    }
}

@media (max-width: 640px){
    .media-card-list .card{
        flex: 0 0 calc(100%);
    }
}