/* Royal Wedding - Team — front-end grid.
   Reuses the theme's global side padding (.padding-30) and Jost font classes;
   breakpoints mirror the theme (tablet <=768px, mobile <=640px). */

.rwtm {
    width: 100%;
    box-sizing: border-box;
}

.rwtm-title {
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 16px;      /* all devices */
    line-height: 1.2;
    color: #2F2F2F;
    text-transform: uppercase;
}

.rwtm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; /* column gap + 30px between rows */
}

.rwtm-card {
    display: flex;
    flex-direction: column;
}

.rwtm-image {
    width: 100%;
    height: 443px;
    object-fit: cover;   /* expand to fill the fixed frame */
    display: block;
}

.rwtm-image--empty {
    background: #ececec;
}

.rwtm-name {
    margin: 30px 0 0;    /* 30px between image and name, all screens */
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: #2F2F2F;
    text-transform: uppercase;
}

.rwtm-position {
    margin: 10px 0 0;    /* exactly 10px between name and position, all sizes */
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    color: #2F2F2F;
    text-transform: uppercase;
}

/* Tablet: max 2 per row */
@media screen and (max-width: 768px) {
    .rwtm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 per row */
@media screen and (max-width: 640px) {
    .rwtm-grid {
        grid-template-columns: 1fr;
    }
}