.iitem {
display: block;
text-align: center;
padding: 1.5rem;
text-decoration: none;
transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
}
.iitem:hover {
color: var(--text-primary);
}
.iitem.iitem-hover:hover {
background-color: var(--accent-color);
color: var(--background-color);
}
.iitem.iitem-hover:hover .iitem-icon {
background: var(--background-color);
color: var(--accent-color);
fill: var(--accent-color);
}
.iitem.iitem-hover:hover .iitem-icon.iii-stroke {
fill: transparent;
stroke: var(--accent-color);
}
.iitem.iitem-hover:hover .iitem-icon.iii-fill-stroke {
stroke: var(--accent-color);
}
.iitem.iitem-hover:hover .iitem-icon-bg {
opacity: 0.14;
}
.iitem.iitem-hover:hover .iitem-desc {
color: var(--background-color);
}
.iitem.iitem-modern {
padding-top: 6.25rem;
padding-bottom: 3rem;
}
.iitem.iitem-modern .iitem-icon {
position: absolute;
left: -1.5rem;
top: -1.5rem;
padding-top: 1rem;
padding-left: 1rem;
margin: 0;
z-index: 11;
}
.iitem.iitem-modern::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0.625rem;
height: 0.625rem;
background-color: transparent;
z-index: 1;
transition: background-color 0.2s 0.1s;
}
.iitem.iitem-modern.iitem-hover:hover::before {
background-color: var(--background-color);
}
.iitem.iitem-row {
display: flex;
align-items: flex-start;
text-align: left;
}
.iitem.iitem-row .iitem-icon {
width: 5.5rem;
height: 5.5rem;
min-width: 5.5rem;
margin: 0;
margin-right: 1.25rem;
}
.iitem.iitem-row .iitem-desc {
font-size: 1rem;
}
.iitem.iitem-row .iitem-heading {
font-size: 1.375rem;
}
.iitem.iitem-row .iitem-icon-bg {
top: -3rem;
}
.iitem-min {
display: flex;
align-items: center;
text-decoration: none;
color: var(--text-primary);
}
.iitem-min .iitem-icon {
min-width: 4.75rem;
width: 4.75rem;
height: 4.75rem;
margin: 0 1.25rem 0 0;
}
.iitem-min .iitem-icon > svg, .iitem-min .iitem-icon img {
width: 2.5rem;
height: 2.5rem;
}
.iitem-min .iitem-heading {
font-size: 1.125rem;
margin: 0;
}
.iitem-min .iitem-desc {
font-size: 0.875rem;
margin-top: 0.5rem;
}
.main-visible .iitem-icon {
transition: background-color 0.2s, color 0.2s, fill 0.2s;
}
.iitem-icon {
display: flex;
align-items: center;
justify-content: center;
width: 6rem;
height: 6rem;
min-width: 6rem;
border-radius: 50%;
overflow: hidden;
background-color: var(--accent-color);
background: linear-gradient(to right, var(--el-gradient-start) 0%, var(--el-gradient-end) 100%);
margin: 0 auto 1.25rem;
color: var(--background-color);
fill: var(--background-color);
stroke: transparent;
}
.iitem-icon > svg, .iitem-icon img {
display: block;
width: 3rem;
height: 3rem;
}
.iitem-icon > img {
object-fit: contain;
}
.iitem-icon.iii-stroke {
fill: transparent;
stroke: var(--background-color);
}
.iitem-icon.iii-fill-stroke {
fill: var(--background-color);
stroke: var(--background-color);
}
.iitem-icon-bg {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2rem;
z-index: 1;
opacity: 0;
color: var(--background-color);
fill: var(--background-color);
stroke: transparent;
transition: opacity 0.2s 0.1s;
}
.iitem-icon-bg.iii-stroke {
fill: transparent;
stroke: var(--background-color);
}
.iitem-icon-bg.iii-fill-stroke {
fill: var(--background-color);
stroke: var(--background-color);
}
.iitem-icon-bg i {
font-size: 31.25rem;
}
.iitem-icon-bg i, .iitem-icon-bg svg {
width: 31.25rem;
height: 31.25rem;
}
.iitem-heading {
margin-bottom: 1rem;
}
.iitem-desc {
color: var(--text-secondary);
transition: color 0.2s;
}
.iitem-icon,
.iitem-heading,
.iitem-desc {
position: relative;
z-index: 2;
}
@media (max-width: 1199.98px) {
.iitem {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}