<div class="circle"></div>
.circle, .circle::before {
width: 300px;
height: 300px;
border-radius: 100%;
}
.circle {
background: red;
position: relative;
}
.circle::before {
content: '';
position: absolute;
left: 30px;
top: -30px;
backgroud: blue;
}
.dgwt-wcas-sf-wrapp { opacity: 0; font-size: 0; line-height: 0; }
.dgwt-wcas-ico-magnifier { opacity: 1; }
.dgwt-wcas-search-input { opacity: 1; font-size: 16px; line-height: 1; }
.dgwt-wcas-sf-wrapp { color: transparent; font-size: 0; line-height: 0; }
.dgwt-wcas-ico-magnifier { color: black; }
.dgwt-wcas-search-input { color: black; font-size: 16px; line-height: 1; }
-<input type="radio" id="img1" name="images" checked>
<label for="img1">
+ <input type="radio" id="img1" name="images" checked>
<span>Image1</span>
<i class="fa fa-sort-desc" aria-hidden="true"></i>
<img src="..." alt="Img1">
</label>
label{
cursor: pointer;
width: 100%;
+ display:flex;
+ align-items:center;
+ flex-wrap: wrap;
}
.fa{
- float: right;
+ margin-left: auto;
}
.element {
/* width: calc(33.3% - 20px); */
width: calc((100% - 20px * 2) / 3);
height: 50px;
background: black;
}
.container {
width: 500px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
border: 1px solid green;
}
.element {
height: 50px;
background: black;
}