body {
    background: var(--white);
}
header {
    &::before {
        background: var(--white);
    }
}
section {
    h2 {
        font-size: 32px;
    }
}
section.hero {
    .inner {
        .wrapper {
            height: 620px;
        }
    }
    &.simp {
        background: var(--light);
    }
}
section.post {
    margin-bottom: 100px;
    .inner {
        display: grid;
        grid-template-columns: 1fr 440px;
        gap: 0 100px;
        aside {
            position: sticky;
            top: 20px;
            height: fit-content;
            > div {
                margin-bottom: 20px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .post-info {
                background: var(--light);
                border-radius: 10px;
                padding: 40px 40px;
                span {
                    color: var(--light-gray);
                    font-size: 16px;
                    margin-bottom: 4px;
                }
                p {
                    color: var(--dark);
                    font-size: 18px;
                    font-family: var(--font-main);
                    font-weight: 600;
                    margin-bottom: 30px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
            .promo {
                height: 560px;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
                padding: 40px;
                display: flex;
                flex-direction: column;
                img {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    left: 0;
                    top: 0;
                    filter: blur(4px);
                    transform: scale(1.1);
                }
                h3 {
                    color: var(--white);
                    position: relative;
                    font-family: var(--font-main);
                    font-size: 24px;
                    font-weight: 600;
                    z-index: 9;
                }
                p {
                    color: var(--white);
                    font-size: 16px;
                    position: relative;
                    z-index: 9;
                    font-weight: 400;
                    opacity: .8;
                    margin-top: 20px;
                }
                .btn {
                    position: relative;
                    z-index: 9;
                    margin-top: auto;
                    margin-bottom: 0;
                    width: 240px;
                    background: var(--white);
                    color: var(--dark);
                    &::after {
                        color: var(--dark);
                    }
                }
                &::after {
                    content: '';
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: var(--dark);
                    opacity: .6;
                }
            }
        }
        .text {
            > div {
                margin-bottom: 60px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            h2 {
                margin-bottom: 10px;
            }
            .content {
                margin-bottom: 80px;
                ol {
                    margin-top: 10px;
                    list-style-position: inside;
                    li {
                        color: var(--text);
                        * {
                            color: inherit;
                        }
                    }
                }
            }
            .item {
                div {
                    margin-bottom: 10px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                p {
                    margin-bottom: 10px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                ul {
                    margin-bottom: 10px;
                    list-style: none;
                    li {
                        position: relative;
                        padding-left: 20px;
                        &::before {
                            content: '•';
                            position: absolute;
                            left: 0;
                            top: 0;
                            color: var(--blue);
                        }
                    }
                    &:last-child {
                        padding-bottom: 0;
                    }
                }
                img {
                    margin-bottom: 10px;
                    margin-top: 20px;
                    height: 600px;
                    border-radius: 10px;
                    object-fit: cover;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
footer {
    border-top: 1px solid var(--light);
    background: var(--light);
}
@media screen and (max-width: 1820px) {
    section.post {
        .inner {
            grid-template-columns: 1fr 380px;
            gap: 0 80px;
        }
    }
}
@media screen and (max-width: 1279px) {
    p {
        font-size: 15px;
    }
    section {
        h2 {
            max-width: unset;
            font-size: 24px;
        }
    }
    section.hero {
        .inner {
            .wrapper {
                height: auto;
            }
        }
    }
    section.post {
        display: flex;
        flex-direction: column;
        margin-top: 80px;
        .inner {
            display: contents;
            aside {
                position: relative;
                display: contents;
                .post-info {
                    order: 1;
                    margin-bottom: 60px;
                }
                .promo {
                    margin-top: 60px;
                    order: 3;
                    padding: 30px;
                }
            }
            .text {
                order: 2;
                > div {
                    margin-bottom: 40px;
                }
                .item {
                    img {
                        height: auto;
                    }
                }
            }
        }
    }
}