#post-crosslinks {}

/*----------------------------------------------------------------------------------------------------*/

#post-crosslinks > .content-wrapper {}
#post-crosslinks > .content-wrapper:first-child {
    position: relative;
    margin-bottom: 50px;
}
#post-crosslinks > .content-wrapper > .hook {
    margin-bottom: 15px;
    
	font-size: inherit;
    font-weight: 700;
    font-style: italic;
}
#post-crosslinks > .content-wrapper > .hook > span { font-weight: 100; }
#post-crosslinks > .content-wrapper > .title { font-weight: 700; }
#post-crosslinks > .content-wrapper > .title > span { font-weight: 100; }
@media (min-width: 1100px)    { #post-crosslinks > .content-wrapper > .title { font-size: 35px; } }
@media (max-width: 1099.99px) { #post-crosslinks > .content-wrapper > .title { font-size: 30px; } }

/*----------------------------------------------------------------------------------------------------*/

#post-crosslinks > .swiper { padding: 0 max(50px, (100vw - 1200px) / 2); }
@media (min-width: 900px)    { #post-crosslinks > .swiper { margin-bottom: 70px; } }
@media (max-width: 899.99px) { #post-crosslinks > .swiper { margin-bottom: 35px; } }
#post-crosslinks > .swiper > .buttons {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    pointer-events: none;
}
#post-crosslinks > .swiper > .buttons > .button {
    position: relative;
    display: block;
    
    background-color: #FFF;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    
    pointer-events: auto;
}
.loaded #post-crosslinks > .swiper > .buttons > .button { transition: background-color .2s ease-out; }
#post-crosslinks > .swiper > .buttons > .button:hover { background-color: var(--main-color); }
#post-crosslinks > .swiper > .buttons > .button:after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-color: #000;
    
    -webkit-mask-image: url("../../images/icons/arrow.link.svg");
    mask-image: url("../../images/icons/arrow.link.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 40% auto;
    mask-size: 40% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    cursor: pointer;
}
#post-crosslinks > .swiper > .buttons > .button.prev-button:after { transform: scaleX(-1); }
@media (min-width: 1300px) {
    #post-crosslinks > .swiper > .buttons { width: 1300px; }
    #post-crosslinks > .swiper > .buttons > .button { height: 100px; width: 100px; }
}
@media (max-width: 1299.99px) {
    #post-crosslinks > .swiper > .buttons { width: calc(100% - 50px); }
    #post-crosslinks > .swiper > .buttons > .button { height: 50px; width: 50px; }
}
@media (min-width: 900px)                           { #post-crosslinks > .swiper > .buttons { height: calc(((min(1300px, 100vw) - 200px) / 3) * .6); } }
@media (max-width: 899.99px) and (min-width: 650px) { #post-crosslinks > .swiper > .buttons { height: calc(((100vw - 125px) / 2) * .6); } }
@media (max-width: 649.99px)                        { #post-crosslinks > .swiper > .buttons { height: calc((100vw - 100px) * .6); } }

/*----------------------------------------------------------------------------------------------------*/

#post-crosslinks > .content-wrapper:last-child { text-align: center; }
#post-crosslinks > .content-wrapper:last-child > .arrow-link { text-align: left; }
@media (min-width: 1100px)    { #post-crosslinks > .content-wrapper:last-child { padding: 40px 0; } }
@media (max-width: 1099.99px) { #post-crosslinks > .content-wrapper:last-child { padding: 30px 0; } }