.lasts_handpans {
position: relative;
width: 100vw;
padding: 100px 0 200px 0;
background-color: var(--green);
overflow: hidden;
}
.lasts_handpans::before {
content: '';
position: absolute;
top: 33%;
left: 50%;
width: 100%;
padding-top: 100%;
background-color: #fff;
border-radius: 100%;
transform: translateX(-50%);
}
.lasts_handpans__inner {
width: calc(100% - 160px);
padding: 0 80px;
max-width: 1200px;
}
.lasts_handpans h2 {
color: #fff;
margin-bottom: 40px;
text-align: center;
}
.lasts_handpans__display {
width: 100%;
align-items: flex-start;
}
.lasts_handpans__card {
position: relative;
width: 30%;
margin: 0 1.5%;
background-color: #fff;
padding: 20px;
align-items: flex-end;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15), 0 3px 20px 0 rgba(0,0,0,0.15);
}
.lasts_handpans__card__image {
position: relative;
width: 100%;
padding-top: 80%;
}
.lasts_handpans__card__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.lasts_handpans__card__title {
font-size: 18px;
font-weight: bold;
width: 70%;
padding-right: 30%;
margin-top: 10px;
min-height: 54px;
}
.lasts_handpans__card__price {
font-size: 26px;
font-weight: 800;
color: var(--green);
margin-bottom: 10px;
}
.lasts_handpans p.no-hp {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
padding: 10px 20px;
background-color: #fff;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
text-align: center;
border-radius: 25px;
max-width: 400px;
}
.acf-block-preview {
}
@media only screen and (max-width: 1000px) {
.lasts_handpans__display {
flex-flow: wrap;
}
.lasts_handpans__card {
margin-bottom: 30px;
min-width: 250px;
}
.lasts_handpans::before {
top: 70%;
}
}
@media only screen and (max-width: 775px) {
.lasts_handpans__card {
width: 100%;
max-width: 400px;
}
.lasts_handpans::before {
top: 90%;
}
}