#compare > div >ul {
    column-gap: 0rem;
    row-gap: 4rem;
    margin-bottom: 10rem;
}

#compare .content {
    border-left: 1.5px solid var(--c-sub);
    padding-left: 1rem;
    padding-block: 1rem;
}

#compare .content h3 {
    margin-bottom: 1rem;
}

#compare .card {
    max-width: 800px;
    margin-inline: auto;
    padding-block: 3rem;
    padding-inline: min(3rem, 3vw);
}

#compare .card span {
    display: block;
    font-size: clamp(2.6rem, 3vw, 3rem);
    margin-bottom: 2rem;
}

#compare .card strong {
    margin-bottom: 1rem;
}

.description {
    gap: 4rem;
    margin-bottom: 6rem;
}

.description img {
    width: 20%;
}

.description .text-content {
    width: fit-content;
}

.description .text-content div {
    margin-bottom: 1rem;
}

.type {
    row-gap: 4rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.type li {
    width: 48%;
    padding: min(4vw, 3rem);
    position: relative;
}

.type h3 {
    margin-bottom: .2em;
}

.type img {
    position: absolute;
    min-width: 45px;
    width: 10%;
    top: 2rem;
    right: min(4vw, 2rem);
}

#others .flex {
    gap: 4rem;
}

#others img {
    width: 45%;
    border-radius: var(--radius);
}

#others .text-content {
    width: 55%;
}

#others h3 {
    padding-bottom: .5rem;
    margin-bottom: 2rem;
    border-color: var(--c-sub);
}

#others li:nth-child(n + 2) {
    margin-top: 2rem;
}

@media screen and (max-width:992px) {
#compare > div >ul {
    margin-bottom: 5rem;
    flex-wrap: wrap;
}

#compare .content{
    width: 50%;
}
    
.description img {
    width: 40%;
}

.description .text-content br{
    display: none;
}

.type li {
    width: 100%;
}

#others .flex > * {
    width: 100%;
}
}

@media screen and (max-width:650px) {

    #compare .content{
    width: 100%;
}
}