header {
    margin-bottom: 0px !important;
}

body {
    padding-top: 0px !important;
}

h1 {
    font: var(--weight-700) var(--size-600)/var(--line-height-100) var(--sour_gummy);
    margin: 0 var(--margin-side-mobile) 32px;
    text-align: center;

    @media screen and (min-width: 800px) {
        text-align: left;
        margin: 0 var(--margin-side-desktop) 48px;
    }
}

h2 {
    font: var(--weight-700) var(--size-300) var(--sour_gummy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview__img {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 20px;
}

h6 {
    background-color: var(--color-sub3);
    padding: 2px 8px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 20px;
    font: var(--weight-700) var(--size-090) var(--assistant);
}

/* feature */

.feature__wrapper {
    background: url('../images/featured_bg.svg') no-repeat bottom center;
    background-size: cover;
    padding: 130px 0 20%;
    margin-bottom: 64px;
    color: var(--color-text-reversed);

    .preview__img {
        margin-bottom: 0;
    }

    .feature__contents {
        margin: 0 var(--margin-side-mobile);
    }

    @media screen and (min-width: 800px) {
        padding: 130px 0 15%;

        .feature__contents {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin: 0 var(--margin-side-desktop);
            align-items: center;
        }
    }
}

.feature__wrapper.dark {
    background: 
                url('../images/featured_bg\ 1\ dark.svg') no-repeat bottom center;
    background-size: cover;
    background-blend-mode: multiply; /* Blend the gradient with the image */
}

h6,
.feature__content__text>h2,
.feature__content__text>p,
li>h2,
li>p {
    margin-bottom: 8px;
}

.feature__contents>p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* list */

.list__wrapper {
    margin: 0 var(--margin-side-mobile);

    @media screen and (min-width: 800px) {
        margin: 0 var(--margin-side-desktop);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

li {
    margin-bottom: 64px;
}

li>p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}