.main_media {
    background: #F0FBFC;
}

.media__head {
    .media__head__inner {
        padding: calc(59.59 / var(--base) * 100vw) calc(80 / var(--base) * 100vw) calc(48 / var(--base) * 100vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: calc(69 / var(--base) * 100vw);

        .media__head-left {
            display: flex;
            flex-direction: column;
            align-items: center;

            h2 {
                font-family: var(--font-en);
                font-size: calc(64 / var(--base) * 100vw);
                font-weight: 400;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(64 / var(--base) * 100vw);
                color: var(--green);
                white-space: nowrap;
            }

            h3 {
                font-family: var(--font-serif);
                font-size: calc(20 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(32.7 / var(--base) * 100vw);
                color: var(--text-black);
            }
        }

        p {
            font-family: var(--font-sans);
            font-size: calc(16 / var(--base) * 100vw);
            font-weight: 400;
            letter-spacing: calc(0.8 / var(--base) * 100vw);
            line-height: calc(28.8 / var(--base) * 100vw);
            color: var(--text-black);
        }
    }
}

.media__inner {
    width: 100%;
    max-width: calc(1220 / var(--base) * 100vw);
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding: calc(40 / var(--base) * 100vw) 0 calc(80 / var(--base) * 100vw);
    border-top: calc(1 / var(--base) * 100vw) solid var(--gray);

    .media__filler {
        display: flex;
        justify-content: space-between;
        gap: calc(50 / var(--base) * 100vw);
        overflow: hidden;

        .media__filler-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: calc(9 / var(--base) * 100vw);

            span {
                font-family: var(--font-serif);
                font-size: calc(20 / var(--base) * 100vw);
                font-weight: 700;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(32.67 / var(--base) * 100vw);
                color: var(--text-black);
            }

            p {
                font-family: var(--font-en);
                font-size: calc(20 / var(--base) * 100vw);
                font-weight: 600;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(12 / var(--base) * 100vw);
                color: var(--green);
            }
        }

        .media__filler-tags {
            display: flex;
            min-height: calc(69.25 / var(--base) * 100vw);
            gap: calc(10 / var(--base) * 100vw);

            .media__filler-tag {
                padding: calc(21.89 / var(--base) * 100vw) calc(64.4 / var(--base) * 100vw) calc(22.36 / var(--base) * 100vw);
                background: var(--white);
                color: var(--green);
                border-radius: calc(10 / var(--base) * 100vw);
                font-family: var(--font-sans);
                font-size: calc(16 / var(--base) * 100vw);
                font-weight: 500;
                letter-spacing: calc(0.8 / var(--base) * 100vw);
                line-height: calc(24.5 / var(--base) * 100vw);
            }
        }
    }

    .post-list {
        margin-top: calc(45 / var(--base) * 100vw);
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, calc(396.67 / var(--base) * 100vw));
        place-content: center;
        gap: calc(15 / var(--base) * 100vw);

        .post-card {
            display: grid;
            background: var(--white);
            border-radius: calc(10 / var(--base) * 100vw);
            overflow: hidden;

            .post-card__thumb {
                overflow: hidden;

                img {
                    aspect-ratio: 396.67 / 236;
                    object-fit: cover;
                }
            }

            .post-card__inner {
                display: grid;
                gap: calc(21 / var(--base) * 100vw);
                padding: calc(30 / var(--base) * 100vw);

                time {
                    color: var(--green);
                    font-family: var(--font-serif);
                    font-size: calc(12 / var(--base) * 100vw);
                    font-weight: 400;
                    letter-spacing: 8%;
                    line-height: 180%;
                }

                h3 {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: var(--black);
                    font-family: var(--font-serif);
                    font-size: calc(18 / var(--base) * 100vw);
                    font-weight: 700;
                    letter-spacing: 4%;
                    line-height: 180%;
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;
                    gap: calc(4 / var(--base) * 100vw);

                    li {
                        height: calc(29.25 / var(--base) * 100vw);
                        padding: calc(1.89 / var(--base) * 100vw) calc(14.4 / var(--base) * 100vw) calc(2.36 / var(--base) * 100vw);
                        border-radius: calc(5 / var(--base) * 100vw);
                        color: var(--white);
                        background: var(--green);
                        font-size: calc(13.6 / var(--base) * 100vw);
                        font-weight: 700;
                        letter-spacing: calc(0.8 / var(--base) * 100vw);
                        line-height: calc(24.48 / var(--base) * 100vw);
                    }
                }

                .post-card__more {
                    display: inline-flex;
                    align-items: center;
                    justify-self: end;
                    gap: calc(10 / var(--base) * 100vw);
                    color: var(--text-black);
                    font-size: calc(13.6 / var(--base) * 100vw);
                    font-weight: 700;
                    letter-spacing: calc(0.8 / var(--base) * 100vw);
                    line-height: calc(24.48 / var(--base) * 100vw);

                    .media__arrow {
                        display: block;
                        width: calc(6 / var(--base) * 100vw);
                        height: calc(6 / var(--base) * 100vw);
                        border-top: calc(1 / var(--base) * 100vw) solid var(--green);
                        border-right: calc(1 / var(--base) * 100vw) solid var(--green);
                        transform: translateY(calc(1.5 / var(--base) * 100vw)) rotate(45deg);
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .media__head {
        .media__head__inner {
            padding: calc(51.22 / var(--base) * 100vw) 0 calc(42.39 / var(--base) * 100vw);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: calc(28.79 / var(--base) * 100vw);

            .media__head-left {
                display: flex;
                flex-direction: column;
                align-items: center;

                h2 {
                    font-size: calc(57 / var(--base) * 100vw);
                    line-height: calc(64 / var(--base) * 100vw);

                }
            }
        }
    }

    .media__inner {
        width: 100%;
        max-width: calc(100% - calc(40 / var(--base) * 100vw));
        margin: 0 auto;
        display: grid;
        place-items: center;
        padding: calc(30 / var(--base) * 100vw) 0 calc(80 / var(--base) * 100vw);

        .media__filler {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: calc(30 / var(--base) * 100vw);

            .media__filler-tags {
                display: flex;
                min-height: calc(55 / var(--base) * 100vw);
                gap: calc(10 / var(--base) * 100vw);
                flex-wrap: wrap;

                .media__filler-tag {
                    padding: calc(15 / var(--base) * 100vw);
                    background: var(--white);
                    color: var(--green);
                    border-radius: calc(10 / var(--base) * 100vw);
                    font-size: calc(14 / var(--base) * 100vw);
                    line-height: calc(24.48 / var(--base) * 100vw);
                }
            }
        }

        .post-list {
            margin-top: calc(28 / var(--base) * 100vw);
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
            gap: calc(8 / var(--base) * 100vw);

            .post-card {
                display: grid;
                background: var(--white);
                border-radius: calc(10 / var(--base) * 100vw);
                overflow: hidden;

                .post-card__thumb {
                    img {
                        aspect-ratio: 335 / 184;
                    }
                }

                .post-card__inner {
                    display: grid;
                    gap: calc(13 / var(--base) * 100vw);
                    padding: calc(20 / var(--base) * 100vw);

                    h3 {
                        font-size: calc(16 / var(--base) * 100vw);
                    }

                    ul {
                        li {
                            height: calc(29 / var(--base) * 100vw);
                            padding: calc(2 / var(--base) * 100vw) calc(10 / var(--base) * 100vw);
                            border-radius: calc(5 / var(--base) * 100vw);
                            color: var(--white);
                            background: var(--green);
                            font-size: calc(12 / var(--base) * 100vw);
                            font-weight: 700;
                            letter-spacing: calc(0.8 / var(--base) * 100vw);
                            line-height: calc(24.48 / var(--base) * 100vw);
                        }
                    }

                    .post-card__more {
                        display: inline-flex;
                        align-items: center;
                        justify-self: end;
                        gap: calc(10 / var(--base) * 100vw);
                        color: var(--text-black);
                        font-size: calc(13 / var(--base) * 100vw);
                        font-weight: 700;
                        letter-spacing: calc(0.8 / var(--base) * 100vw);
                        line-height: calc(24.48 / var(--base) * 100vw);

                        .media__arrow {
                            display: block;
                            width: calc(6 / var(--base) * 100vw);
                            height: calc(6 / var(--base) * 100vw);
                            border-top: calc(1 / var(--base) * 100vw) solid var(--green);
                            border-right: calc(1 / var(--base) * 100vw) solid var(--green);
                            transform: rotate(45deg);
                        }
                    }
                }
            }
        }
    }

}