/* Alleen voor /scheidsrechtersportaal/. Gedeelde regels horen in base.css. */

/* Elke tegel toont het schermbeeld van de functie die hij beschrijft. De
   maximumbreedte houdt de staande telefoonverhouding in toom, zodat de
   tekst van de tegel naast de andere tegels leesbaar blijft. */
/* Tegels met een schermbeeld rekken mee met de rij en zetten het beeld
   onderaan, zodat de vier telefoons op gelijke hoogte staan terwijl de
   tekstlengtes verschillen. */
.tile:has(.tile-phone) {
    display: flex;
    flex-direction: column;
}

.tile-phone {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

.tile-phone img {
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}