.ia-app {
display: flex;
align-items: center;
gap: var(--space-md);
}
.ia-app-icon {
flex: none;
width: 56px;
height: 56px;
border-radius: var(--radius-md);
box-shadow: 0 0 0 1px var(--paper-edge);
}
.ia-app-name {
margin: 0;
font-family: var(--font-title-serif);
font-size: var(--font-size-xl);
font-weight: 600;
line-height: var(--leading-tight);
}
.ia-install {
align-self: flex-start;
}
.ia-installed i {
margin-inline-end: var(--space-2xs);
color: var(--color-success);
}
.ia-rows {
display: grid;
gap: var(--space-sm);
margin-block-start: var(--space-sm);
}
.ia-marks {
display: inline-flex;
flex: none;
gap: var(--space-2xs);
}
.ia-marks .ap-logo {
margin: 0;
}
.ap-row .ia-marks {
flex: none;
margin-inline-end: var(--space-sm);
}
.ap-card-logo .ia-marks .ap-logo {
width: 16px;
height: 16px;
}
.ia-start {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ia-shots {
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--space-lg);
}
.ia-phone {
width: min(45%, 190px);
height: auto;
border: 1px solid var(--paper-edge);
border-radius: var(--radius-xl);
box-shadow: var(--paper-shadow);
}
@media (width <= 715px) {
.ia-start {
grid-template-columns: minmax(0, 1fr);
}
}