.ini {
position: relative;
display: flex;
align-items: flex-start;
}
.ini.ini-bg {
max-width: 18rem;
min-height: 8.5rem;
align-items: flex-end;
margin-left: auto;
margin-right: auto;
}
.ini.ini-bg .ini-info {
padding-left: 0;
}
.ini.ini-wide {
max-width: 100%;
}
.ini.ini-min {
display: block;
}
.ini.ini-min .ini-info {
padding-left: 0;
}
.ini.ini-min .ini-heading {
font-size: 1.375rem;
}
.ini-min-header {
display: flex;
margin-bottom: 1.25rem;
}
.ini-min-header .ini-heading {
margin-bottom: 0;
}
.ini-count-min {
font-size: 1.375rem;
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
color: var(--accent-color);
margin-right: 0.625rem;
line-height: var(--heading-line-height);
}
.ini-count {
font-size: 1.0625rem;
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
color: var(--accent-color);
margin-top: 0.125rem;
position: relative;
z-index: 1;
padding-right: 0.3125rem;
}
.ini-count::after {
content: "";
position: absolute;
left: 100%;
top: 50%;
width: 3.25rem;
height: 1px;
background-color: var(--text-primary);
margin-top: -1px;
}
.ini-info {
position: relative;
z-index: 1;
padding-left: 3.75rem;
}
.ini-heading {
margin-bottom: 1.25rem;
}
.ini-desc {
color: var(--text-secondary);
}
.ini-desc p {
margin: 0;
}
.ini-count-large {
font-size: 9.5rem;
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
color: var(--accent-color);
opacity: 0.14;
position: absolute;
left: 0;
bottom: -1rem;
line-height: 1;
}
.ini-min {
display: flex;
align-items: center;
}
.aim-icon {
display: flex;
align-items: center;
justify-content: center;
min-width: 4.75rem;
width: 4.75rem;
height: 4.75rem;
margin-right: 1.25rem;
border-radius: 50%;
color: var(--background-color);
background-color: var(--accent-color);
background: linear-gradient(to right, var(--el-gradient-start) 0%, var(--el-gradient-end) 100%);
overflow: hidden;
}
.aim-icon > img {
display: block;
width: 2.5rem;
height: 2.5rem;
object-fit: contain;
}
.aim-heading {
margin-bottom: 0;
}
.aim-desc {
font-size: 0.875rem;
margin-top: 0.5rem;
color: var(--text-secondary);
}
.aim-desc p {
margin: 0;
}
@media (max-width: 1199.98px) {
.ini-info {
padding-left: 2.5rem;
}
.ini-count::after {
width: 2rem;
}
}
@media (max-width: 991.98px) {
.ini-info {
padding-left: 2.75rem;
}
.ini-count::after {
width: 2.25rem;
}
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 567px) and (max-width: 900px) and (orientation: landscape) {
.ini-heading {
min-height: auto;
}
.ini-heading br {
display: none;
}
.ini-count {
margin-top: 0;
}
.ini-count-large {
font-size: 8rem;
bottom: -0.625rem;
}
}
@media (max-width: 575.98px) {
.ini-info {
padding-left: 3rem;
}
.ini-count::after {
width: 42px;
}
}
@media (min-width: 768px) {
.ini-min-header {
align-items: flex-end;
}
}