/* start video */
#video>div {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
margin-bottom: 2%;
}

#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* end video */
/* start product label */
:root {
--bioderma: #ffc08c;
}

.grico {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 80%;
color: #006b80 !important;
/* font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif !important; */
font-weight: bold !important;
}

.gridz {
margin: 0 auto;
display: grid;
grid-template-areas:
"on tw ."
"fr tw fv"
"sx tw .";
row-gap: 15px;
justify-content: flex-start;
align-items: center;
}

.one {
grid-area: on;
}

.two {
grid-area: tw;
background-color: transparent;
position: relative;
margin-bottom: 5%;
width: 15vw;
}

.four {
grid-area: fr;
}

.five {
grid-area: fv;
text-align: center;
}

.six {
grid-area: sx;
}

.two img {
display: block;
width: 100%;
}

.gridz>div p {
font-weight: normal;
margin: 15px;
color: #006b80;
font-weight: bold;
text-align: center;
}

.one::before,
.four::before,
.six::before {
content: "";
position: absolute;
top: 49%;
left: -0.1rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 100px;
display: block;
background-color: var(--bioderma);
}

.five::before {
content: "";
position: absolute;
top: 49%;
right: -0.1rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 100px;
display: block;
background-color: var(--bioderma);
}

.one,
.five,
.four,
.six {
border-top: 2px solid var(--bioderma);
position: relative;
text-indent: 1em;
width: 20vw;
}

.borderLeft {
border-left: 2px solid var(--bioderma);
position: absolute;
top: 0;
bottom: 0;
height: 33%;
}

.borderRight {
border-right: 2px solid var(--bioderma);
position: absolute;
top: 0;
right: 0;
height: 33%;
}

.five .borderLeft {
opacity: 0;
}

.lion {
color: var(--bioderma);
font-weight: bold;
margin-left: 1em;
}

.bigimage {
display: block;
}

.smallimage {
display: none !important;
}

@media screen and (max-width: 700px) {
.grico {
width: 100%;
}

.gridz {
padding: 10px;
grid-template-areas:
"on tw "
"fr tw "
"fv tw "
"sx tw ";
width: 100%;
}

.five::before {
left: -0.1rem;
right: none;
}

.five {
text-align: left;
}

.five .borderLeft {
opacity: 1;
}

.five .borderRight {
display: none;
}

.one,
.five,
.four,
.six {
width: 50vw;
}

.two {
width: 55vw;
}
}

@media screen and (max-width: 490px) {
.bigimage {
display: none !important;
}

.smallimage {
display: block !important;
}
}

/* start image collection */
.imagegroup {
display: flex;
justify-content: space-evenly;
align-items: center;
margin-bottom: 3%;
}

.imagegroup img {
width: 30%;
display: block;
margin: 2% auto;
}

/* start how */
.how {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}

.how>div {
width: 49%;
align-self: center;
}

.how img {
display: block;
margin: 0 auto;
width: 100%;
}

.use ul li {
padding: 5px;
vertical-align: middle;
}

.im {
display: flex;
}

.im img {
align-self: center;
}

/* start how */
.diagram {
display: flex;
justify-content: space-between;
}

.diagram img {
display: block;
margin: 3% auto;
}

.guide {
width: 18%;
}

.guide p:first-of-type {
font-weight: bold;
text-align: center;
}

.guide li {
margin-bottom: 0;
}

.imz {
width: 35%;
}

.imz img {
width: 100%;
}

@media screen and (max-width: 780px) {
.imz {
order: -1;
}

.diagram {
flex-direction: column;
}

.guide {
width: 100%;
}

.imz {
width: 100%;
}
}

/* Features Styling */
.rowz {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.Features {
flex-basis: 16%;
padding: 10px;
text-align: center;
}

.Features img {
min-width: 75.34px;
}

.FeaturesHeaders {
color: #863ebc;
font-weight: bold;
}

/*grid-code*/
.btn1 {
border: none;
color: white;
font-size: 16px;
border-radius: 10px;
}

.ban img {
display: block;
margin: 10px auto 2%;
width: 70%;
}

.BASIO {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
gap: 2%;
cursor: pointer;
align-content: center;
}

.BASIO img {
display: block;
width: 100%;
border-radius: 5%;
margin: 0 auto 2%;
}

.child p:first-of-type {
text-align: center;
}

.card {
transition: 0.3s;
}

.card:hover {
transform: translatey(-10px);
}

@media only screen and (max-width: 767px) {
.BASIO::after {
content: "";
height: 5vh;
}
}

@media screen and (max-width: 700px) {
.imagegroup {
display: none
}

@media screen and (max-width: 700px) {
.Tips {
flex-basis: 50%;
}

.BeautyCare {
position: relative;
letter-spacing: 1px;
}

.BeautyCare-block {
position: absolute;
bottom: 33%;
right: 5%;
color: white;
padding: 0px;
}

.Choose {
font-weight: bold;
color: white;
font-family: trebuchet ms;
font-size: 3.5vw;
text-align: right;
}
}

@media screen and (max-width: 700px) {
.Features {
flex-basis: 49%;
text-align: center;
}

.Features img {
min-width: 115px;
max-width: 75.34px;
}
}

@media screen and (max-width: 700px) {
.how>div {
width: 100%;
}

.im {
order: 1;
}

.im img {
width: 100%;
margin: 3% auto;
}

.use {
line-height: normal;
}

.use ul li {
padding: 5px;
vertical-align: middle;
}
}

@media screen and (max-width: 700px) {
.imagegroup {
flex-direction: column;
}

.imagegroup img {
width: 100%;
margin: 2% auto;
}
}

Product Description:

Product Benefits:

Free From:

Ingredients:

Pineapple Ceramide:

• Helps boost luminosity and improve the appearance of skin's texture and tone.
  

Pro-vitamin B5:

• A humectant, pro-vitamin B5 attracts hydration to the skin and holds it there, helping improve skin's barrier
  function.

Sodium Hyaluronate:

• With a smaller molecular weight than hyaluronic acid, it is able to penetrate skin and deliver intense hydration
  to help reduce the appearance of fine lines and wrinkles and promote firmness.

Barberry Extract:

• The primary component of the barberry plant, berberine is an alkaloid that can have soothing and natural
  antibacterial properties.

Explore
Drunk Elephant Brand:

.image_section img {
display: block;
width: 100%;
height: auto
}

@media (max-width:640px) {
.image_section img {
display: none;
}
}
}



.image_small img {
display: block;
width: 100%;
height: auto
}

@media (min-width:640px) {
.image_small img:first-child {
display: none;
}
}
}