/**
 * AdditionalRailingComponents Shortcode Styles
 *
 * @package AmericanEagleCore\Shortcode\AdditionalRailingComponents
 */


/* ARC */
.arc-wrapper {
    display: grid;
    column-gap: 20px;
    row-gap: 20px;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {
    .arc-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1025px) {
    .arc-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1280px) {
    .arc-wrapper {
        column-gap: 50px;
    }
}

.arc-wrapper .arc-card-image {
    margin-bottom: 20px;
    background: var(--global-palette8);
    display: flex;
    justify-content: center;
    aspect-ratio: 16 / 9;
}

.arc-card-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.arc-wrapper .arc-card-title {
    margin: 0 0 10px;
}

.arc-card-link {
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--global-font-size-medium);
    text-decoration: none;
}

.arc-card-link:hover {
    text-decoration: underline;
}

.arc-card-link-download::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 16px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none'%3E%3Cpath d='M0 0H7.5L12 4.5V16H0V0ZM6.5 1.84375V5.5H10.1875L6.5 1.84375ZM5.46875 13.7812L6 14.3125C6.125 14.2188 6.96875 13.375 8.53125 11.7812L9.0625 11.25L8 10.1875C7.6875 10.5 7.28125 10.9375 6.75 11.4375V8H5.25V11.4375C4.75 10.9375 4.3125 10.5 4 10.1875L2.9375 11.25C3.0625 11.375 3.90625 12.2188 5.46875 13.7812Z' fill='%23254749'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.arc-card-link:not(.arc-card-link-download)::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 16px;
    margin-left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M16.7188 8.71875L11.7188 13.7188L11 14.4062L9.59375 13C9.625 12.9688 10.9688 11.625 13.5938 9H1V7H13.5938C10.9688 4.375 9.625 3.03125 9.59375 3L11 1.59375L11.7188 2.28125L16.7188 7.28125L17.4375 8L16.7188 8.71875Z' fill='%23254749'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}