.image { position: relative; background-size: cover !important; background-position: center; background-repeat: no-repeat; overflow: hidden; // background-color: #f0f0f0; img { @include post_center(relative); width: 100%; } &.no-bg-color { background-color: rgba(0,0,0,0); } @for $i from 1 through 1000 { &.image-#{$i}px { width: #{$i}px; height: #{$i}px; } } &.image-all { width: 100%; height: 100%; } &.image-full { width: 100%; padding-bottom: 100%; } &.image-middle { width: 100%; padding-bottom: 50%; } &.image-radius { border-radius: 5px; } &.image-circle { border-radius: 100%; } &.image-pointer { cursor: pointer; } &.image-more { &:hover { .ttl { color: $txt-min-color; } } } &.image-center { margin: auto; } .img { @include post_center(absolute); height: 100%; } .ttl { @include post_center(absolute); color: $txt-sek-color; font-size: 16px; font-weight: 600; } .icn { @include post_center(absolute); color: $txt-sek-color; .icn-big { font-size: 34px; } } } .image-group { position: relative; width: 150px; display: flex; padding: 5px 0; .i-g-list { position: relative; width: 28px; } .image { width: 33.5px; height: 33.5px; border: 1.5px #fff solid; background-color: #f5f5f5; .icn { color: rgba(0,0,0,0.14); font-size: 32px; } } }