.daily-pixel-slider-wrap {
--daily-pixel-spacing: clamp(25px, 5vw, 70px);
height: clamp(450px, 70vw, 700px);
position: relative;
.daily-middle-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 99;
}
.daily-bottom-content {
position: absolute;
bottom: 0;
left: 0;
max-width: 600px;
padding: var(--daily-pixel-spacing);
z-index: 99;
}
.daily-image-wrap {
height: 100%;
width: 100%;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.daily-title {
margin: 0;
font-size: clamp(36px, 7vw, 70px);
text-transform: uppercase;
font-weight: 800;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000000;
color: transparent;
}
.daily-sub-title {
font-size: clamp(16px, 3vw, 20px);
text-transform: capitalize;
margin: 0 0 clamp(10px, 1.5vw, 15px);
font-weight: 600;
color: #303135;
}
.daily-text {
font-size: clamp(14px, 2.5vw, 16px);
margin: 0;
color: #43434c;
}
.daily-link {
font-size: clamp(12px, 2.5vw, 14px);
margin-top: clamp(10px, 1.5vw, 15px);
display: inline-block;
font-weight: 600;
position: relative;
color: #070709;
transition: color 0.3s;
&::before {
content: "";
position: absolute;
bottom: -3px;
width: 20px;
height: 2px;
background: currentColor;
transition: width 0.3s;
left: 0;
box-sizing: border-box;
}
&:hover {
color: var(--daily-brand-color);
&::before {
width: 100%;
}
}
}
.daily-nav-button {
position: absolute;
cursor: pointer;
background: #fff;
padding: clamp(10px, 3vw, 12px);
display: block;
border-radius: 50%;
margin: 0 var(--daily-pixel-spacing);
transition: all 0.3s ease;
z-index: 99;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: var(--daily-brand-color);
width: 100%;
height: 100%;
border-radius: inherit;
transform: scale(0);
transition: all 0.3s ease;
}
svg {
width: clamp(16px, 3vw, 22px);
height: clamp(16px, 3vw, 22px);
display: block;
color: currentColor;
z-index: 99;
position: relative;
}
&:hover {
color: #fff;
transform: scale(1.1) translateY(-50%);
&::before {
transform: scale(1);
}
}
}
.daily-pagination {
&.swiper-pagination {
width: auto;
display: flex;
align-items: center;
gap: 10px;
.swiper-pagination-bullet {
margin: 0;
width: clamp(10px, 2vw, 12px);
height: clamp(10px, 2vw, 12px);
border: 1px solid var(--daily-brand-color);
opacity: 1;
background: transparent;
transition: all 0.3s;
border-radius: 50%;
&.swiper-pagination-bullet-active {
background: var(--daily-brand-color);
width: 16px;
height: 16px;
}
}
}
}
&.daily-nav-ps-center {
.daily-nav-button {
top: 50%;
transform: translateY(-50%);
&.daily-button-prev {
left: 0;
}
&.daily-button-next {
right: 0;
}
}
.daily-pagination {
&.swiper-pagination {
right: 0;
left: unset;
bottom: 0 important;
margin: var(--daily-pixel-spacing);
}
}
}
&.daily-nav-ps-bottom-right {
.daily-nav-button-wrap {
display: flex;
position: absolute;
bottom: 0;
right: 0;
gap: 15px;
margin: var(--daily-pixel-spacing);
.daily-nav-button {
position: unset;
margin: 0;
&:hover {
transform: scale(1.1);
}
}
}
.daily-pagination {
&.swiper-pagination {
bottom: unset !important;
top: 50%;
transform: translateY(-50%);
flex-direction: column;
margin: 0 var(--daily-pixel-spacing);
}
}
}
}