.download {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--downloads-line, rgba(37, 48, 129, .28));
}

.download--blue {
    background-color: var(--color-primary);
    border-color: var(--downloads-line-on-blue, rgba(255, 255, 255, .32));
}

.download-swatch {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 7.5rem;
    padding: 1.75rem 1rem;
}

.download-swatch img {
    width: auto;
    max-width: 82%;
    height: auto;
    max-height: 4.75rem;
}

.download-foot {
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--downloads-line, rgba(37, 48, 129, .28));
}

.download--blue .download-foot {
    border-top-color: var(--downloads-line-on-blue, rgba(255, 255, 255, .32));
}

.download-name {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    color: var(--color-black);
}

.download--blue .download-name {
    color: var(--color-white);
}

.download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.download-btn:is(:link, :visited) {
    display: inline-block;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--color-primary);
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.075rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary);
    transition: background-color var(--transition-duration) var(--transition-style), color var(--transition-duration) var(--transition-style);
}

.download-btn:is(:hover, :focus-visible) {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.download--blue .download-btn:is(:link, :visited) {
    border-color: var(--color-white);
    color: var(--color-white);
}

.download--blue .download-btn:is(:hover, :focus-visible) {
    background-color: var(--color-white);
    color: var(--color-primary);
}