h2 { margin: 0 0 24px; font-weight: 500; font-size: 2.5rem; } .swiper-slide { width: 50% !important; } .holder { .slide { position: relative; width: 100%; height: 280px; a { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; background-color: rgba(62,61,64,0.5); color: #ffffff; font-weight: bold; .date { font-size: 14px; } .excerpt { margin-top: auto; font-size: 20px; } } img { display: block; width: 100%; height: 100%; object-fit: cover; } } .navigation { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 36px; .btn.icon { width: 48px; height: 48px; background-image: url('~projects/app-a/src/assets/images/icons/chevron_left_48.svg'); &.prev {} &.next {transform: rotateZ(180deg);} } .bullets { text-align: center; ::ng-deep .swiper-pagination-bullet { width: 16px; height: 16px; margin: 0 12px; background-color: #C4C4C4; } ::ng-deep .swiper-pagination-bullet-active { background-color: #FFB700; } } } } .more { margin-top: 50px; a { display: inline-block; padding-right: 20px; background: transparent url("~projects/app-a/src/assets/images/icons/chevron_right_24dp.svg") 100% 50% no-repeat; border-bottom: 1px solid white; &:hover { border-bottom-color: var(--second); } } } .swiper-container { width: 100%; } @media screen and (min-width: 640px) { .swiper-container { width: 640px; } } @media screen and (min-width: 768px) { .swiper-container { width: 768px; } }