.magazine-page {
    background-color: var(--color-neutral-100);
}

.keyword-bar {
    background-color: var(--color-neutral-100);
    box-shadow: 2px 15vmax 1px 17vmax var(--color-neutral-100);
}

.magazine-page .category-header__main {
    margin-bottom: 0;
}

.magazine-page .category-header {
    padding-bottom: 0;
    border-bottom: none;
}

.magazine-page .container > .magazine__content:nth-of-type(2) {
    margin-bottom: 24px;
    padding-bottom: 66px;
    border-bottom: 3px solid var(--color-neutral-200);
}

.magazine-page .container > .magazine__content:nth-of-type(3) {
    padding-bottom: 66px;
    margin-bottom: 0px;
}

.magazine__content {
    margin-bottom: 24px;
}

.magazine__slider {
    margin-top: 24px;
    position: relative;
}

.magazine__image-wrapper {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

    .magazine__image-wrapper::before {
        content: "";
        display: block;
        padding-top: 139.16%; /* 398 / 286 × 100% */
    }

.magazine__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.magazine__image-wrapper > *::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.magazine__caption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 3;
    font: 500 16px/149% var(--font-body);
    color: var(--color-neutral-0);
    margin-top: 8px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.magazine__more {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    font: 500 16px var(--font-body);
    color: var(--color-secondary-900);
    text-transform: uppercase;
    display: none;
}

    .magazine__more:hover {
        color: var(--color-secondary-900);
    }

.magazine__more-icon {
    margin-left: 8px;
}
/* Arrow buttons */
.slider-nav__left {
    left: -100px;
}

.slider-nav__right {
    right: -100px;
}

.slider-nav__left,
.slider-nav__right {
    position: absolute;
    z-index: 20;
    cursor: pointer;
    width: 53px;
    height: 53px;
    background: #0C0C204D;
    border-radius: 50%;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
    /* Custom next arrow */
    .slider-nav__right::after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.90998 20.67C8.71998 20.67 8.52998 20.6 8.37998 20.45C8.08998 20.16 8.08998 19.68 8.37998 19.39L14.9 12.87C15.38 12.39 15.38 11.61 14.9 11.13L8.37998 4.60999C8.08998 4.31999 8.08998 3.83999 8.37998 3.54999C8.66998 3.25999 9.14998 3.25999 9.43998 3.54999L15.96 10.07C16.47 10.58 16.76 11.27 16.76 12C16.76 12.73 16.48 13.42 15.96 13.93L9.43998 20.45C9.28998 20.59 9.09998 20.67 8.90998 20.67Z" fill="white"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Custom prev arrow */
    .slider-nav__left::after {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.09 3.32998C15.28 3.32998 15.47 3.39998 15.62 3.54998C15.91 3.83998 15.91 4.31998 15.62 4.60998L9.10002 11.13C8.62002 11.61 8.62002 12.39 9.10002 12.87L15.62 19.39C15.91 19.68 15.91 20.16 15.62 20.45C15.33 20.74 14.85 20.74 14.56 20.45L8.04002 13.93C7.53002 13.42 7.24002 12.73 7.24002 12C7.24002 11.27 7.52002 10.58 8.04002 10.07L14.56 3.54998C14.71 3.40998 14.9 3.32998 15.09 3.32998Z" fill="white"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .slider-nav__left:hover,
    .slider-nav__right:hover {
        background: rgba(0,0,0,0.4);
    }

/* Pagination bullets at bottom */
.swiper-pagination {
    bottom: -42px !important;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--color-neutral-200);
    opacity: 1;
    border-radius: 50%;
    margin: 0 4px !important;
    transition: all 0.3s;
}

.swiper-pagination-bullet-active {
    width: 34px;
    background: var(--color-primary-900);
    border-radius: 12px;
}

@media screen and (max-width: 1400px) {
    .slider-nav__left {
        left: -65px;
    }

    .slider-nav__right {
        right: -65px;
    }
}

@media screen and (max-width: 1200px) {
    .slider-nav__left {
        left: 8px;
    }

    .slider-nav__right {
        right: 8px;
    }
}

@media screen and (max-width: 576px) {
    .slider-nav__left, .slider-nav__right, .swiper-pagination {
        display: none;
    }

    .magazine-page .category-header {
        margin-bottom: 16px;
    }

    .magazine-page,
    .keyword-bar {
        background-color: initial;
        box-shadow: none;
    }

    .magazine__more-wrapper {
        margin-top: 16px;
    }

    .magazine__more {
        display: flex;
    }

    .magazine-page .container > .magazine__content:nth-of-type(2) {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .magazine-page .container > .magazine__content:nth-of-type(3) {
        margin-bottom: 27px;
    }
}