/* Keep the extra services aligned with the main service tiles. */
.more-services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resume-service {
    background: radial-gradient(ellipse at 80% 0%, #38547f, #162743 65%);
}

.resume-service:focus-visible {
    outline: 3px solid var(--brand-blue);
    outline-offset: 4px;
}

.resume-service-art {
    position: absolute;
    top: 15px;
    right: 24px;
    width: 105px;
    height: 147px;
    pointer-events: none;
}

.resume-service-paper {
    position: absolute;
    inset: 0;
    border: 1px solid #d6deee;
    border-radius: 3px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

.resume-service-paper-back {
    background: #dfe8fa;
    transform: rotate(10deg) translate(5px, -4px);
}

.resume-service-paper-front {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    color: #273552;
    background: #fffefa;
    transform: rotate(-5deg);
}

.resume-service-paper-name { font-size: 6px; font-weight: 700; letter-spacing: .02em; }
.resume-service-paper-role { margin-top: 4px; font-size: 3px; letter-spacing: .09em; color: #5273a7; }
.resume-service-paper-rule { height: 1px; margin: 8px 0 1px; background: #6c8abb; }
.resume-service-paper-heading { margin-top: 7px; margin-bottom: 5px; color: #5273a7; font-size: 4px; font-weight: 700; letter-spacing: .06em; }
.resume-service-paper-lines { height: 13px; background: repeating-linear-gradient(to bottom, #cbd2dc 0 1px, transparent 1px 5px); }
.resume-service-paper-lines-short { width: 70%; height: 6px; }

@media (max-width: 1024px) {
    .more-services-grid { gap: 12px; }
}

@media (max-width: 820px) {
    .more-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 640px) {
    .more-services-grid { gap: 10px; }
    .resume-service-art { top: 10px; right: 16px; transform: scale(.8); transform-origin: top right; }
}

@media (max-width: 375px) {
    .more-services-grid { gap: 8px; }
}