/**
 * Targets the icon download card on the Brand Guidelines - Patterns page.
 *
 * Affected element:
 *   .icon-download-card  →  <a> on /brand/icons
 *
		<a href="REPLACE_WITH_LINK" class="icon-download-card">
    <img src="REPLACE_WITH_IMAGE_URL" alt="" class="icon-download-card__image">
    <span class="icon-download-card__banner">REPLACE_WITH_LABEL</span>
		</a>
 */
.icon-download-card {
    display: block;
    max-width: 880px;
    margin: 72px auto 72px;
    text-decoration: none;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.15s ease;
    object-fit: cover;
}
.icon-download-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;    /* no height: auto here */
    object-fit: cover;
    object-position: center;
}
.icon-download-card__banner {
    display: block;
    background-color: #0179b7;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 16px;
    transition: background-color 0.15s ease;
}
.icon-download-card:hover,
.icon-download-card:focus-visible {
    transform: scale(1.02);
}
.icon-download-card:hover .icon-download-card__banner,
.icon-download-card:focus-visible .icon-download-card__banner {
    background-color: #014a99;
}
.icon-download-card:focus-visible {
    outline: 3px solid #ffc627;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .icon-download-card,
    .icon-download-card:hover,
    .icon-download-card:focus-visible {
        transform: none;
        transition: none;
    }
}
.brand-white-BG .signpost-wrapper {
    background-color: #fff;
    border: none;
}
.brand-white-BG .signpost-button.cta{ 
	margin:0 auto;
}
.brand-guide-cards .card:not(.card.card-foldable) > div:first-of-type:not(.card-image-content) {
      flex-direction: column;
    display: flex;
}
.brand-icon-btn a.btn.btn-sm.cta {
    max-width: 171px;
    min-height: 62px;
    align-content: center;
}