/* Size guide */

.size-guide {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-xxxl);

    padding: calc(2 * var(--space-xxxl)) var(--space-xxxl);
}

.sizes__chart {
    width: 100%;

    border-top: 1px solid var(--color-05);
    border-left: 1px solid var(--color-05);

    display: flex;
}

.size__block {
    display: flex;
    flex-direction: column;
}

.sizes__chart--04 > .size__block {
    width: calc(100% / 4);
}

.sizes__chart--06 > .size__block {
    width: calc(100% / 6);
}

.size__wrapper {
    border-right: 1px solid var(--color-05);
    border-bottom: 1px solid var(--color-05);

    text-align: center;

    padding: var(--space-xs);
}

.size__wrapper:first-child {
    background-color: var(--color-01);
}

.size__label {
    display: none;
}

.size__wrapper:first-child > .size,
.size__wrapper:first-child > .size__label,
.size__wrapper:first-child > .size {
    color: var(--color-02);
}

/* How to measure */

.how-to-measure {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-xxxl);

    /* padding: var(--space-xxxl) var(--space-xxxl) calc(2 * var(--space-xxxl)) var(--space-xxxl); */
    padding: var(--space-xxxl);
}

.htm__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.htm__list-item > b {
    font-weight: 400;
}

@media (max-width: 1280px) {
    
}

@media (max-width: 1024px) {
    
}

@media (max-width: 768px) {
    /* Size guide */

    .sizes__chart {
        border: none;

        flex-direction: column;
        gap: var(--space-m);
    }

    .size__block {
        border-left: 1px solid var(--color-05);
    }

    .sizes__chart--04 > .size__block,
    .sizes__chart--06 > .size__block {
        width: 100%;
    }

    .size__block:first-child {
        display: none;
    }

    .size__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .size__label {
        display: block;
    }
}

@media (max-width: 480px) {
    
}