#topnews-swiper { h2.text-center { margin-bottom: rem-calc(50); } .news-container { background: $green; span, h3, a {color: $white;} } .swiper-container { width: 100%; height: 100%; z-index: 1; position: relative; .arrow-prev, .arrow-next { position: absolute; top: 50%; z-index: 5; cursor: pointer; &.swiper-button-disabled { opacity: .35; cursor: auto; } } } .grid-x { padding: 0 0.3125rem; } .news-img-wrapper { margin: 2rem auto 0.5rem; width: rem-calc(175); .news-img { width: 175px; height: 175px; border-radius: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } } .news-content { margin: 2rem 3rem; .news-date {font-size: rem-calc(14);} .news-descr { font-size: rem-calc(16); &::after { content: ' mehr'; text-transform: uppercase; font-family: 'Averta W01', calibri, sans-serif; font-size: rem-calc(15); font-weight: $font-weight-bold; } } } } // pfeile: small, medium @include breakpoint(medium down) { #topnews-swiper { .arrow-prev, .arrow-next { display:none; content: ""; position: absolute; top: 50%; width: 50px; height: 60px; margin-top: -20px; z-index: 10; cursor: pointer; font-size: 40px; color: $white; font-family: $font-family-head; font-weight: $font-weight-light; font-size: 36px; line-height: 50px; text-align: center; text-shadow: 0 1px 10px rgba(0,0,0,.5); &:before, &:after { display: block; transform: scaleY(2); } &.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } } .arrow-prev { left: 0; &:before { content: "<"; } } .arrow-next { right: 0; &:before { content: ">"; } } } } // medium @include breakpoint (medium) { #topnews-swiper { margin-bottom: rem-calc(110); h2.text-center { &:before { content: "+ + "; } &:after { content: " + +"; } } a { .news-content { transition: padding 200ms; margin: 3rem 2.5rem 2.5rem 4rem; padding: rem-calc(5) 0; } &:hover .news-content { padding-top: rem-calc(0); padding-bottom: rem-calc(10); } } .news-img-wrapper {margin: 3rem 17.5% 2rem 32.5%;} } } // large @include breakpoint (large) { #topnews-swiper { a .news-content { margin: 3.25rem 5rem 2rem 0.875rem; } .arrow-prev, .arrow-next { left: 15px; width: 60px; height: 60px; margin: -30px 0 0; background: $white; border-radius: 100%; &:before, &:after { content: ""; width: 35%; height: 3px; background: $green; position: absolute; top: 50%; left: 36%; transition: left 100ms; } &:before { margin-top: -1px; @include transform-origin(0 100%); @include transform( rotate(-45deg) ); } &:after { margin-top: -2px; @include transform-origin(0 0); @include transform( rotate(45deg) ); } body.desktop & { &:hover:before, &:hover:after { left: 32%; } } } .arrow-next { right: 15px; left: auto; @include transform( rotate(180deg) ); } .news-img-wrapper {margin: 2rem 17.5% 2rem 32.5%;} .news-img { width: rem-calc(300); height: rem-calc(300); margin-left: 0rem; } } }