/* ======= Variables ======= */
/* :root {
  --brand-primary: #8F140C;
  --brand-secondary: #F6EDEA;
  --neutral-dark: #4B0600;
  --neutral-light: #fff;
} */

/* ======= Bikecards ======= */
.c-bikecard{
    clip-path: inset(-32px 0 0 0); /* this makes it so there's no overflow at the sides and bottom BUT it allows for 32px overflow at the top (this is for the icon to show up) */
    animation-fill-mode: both !important; /* prevents the animation from flashing at the start  */
}

.c-bikecard__icon{
    border-radius: 50% !important;
    width: 72px !important;
    height: 72px !important;
    background-color: var(--brand-secondary);

    position: absolute;
    left: 50%;
    top: -36px;
    transform: translateX(-50%);

    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.c-bikecard__title{
    opacity: 0;
    bottom: -32px !important;
    transition: all 0.3s ease !important;
}

@media (max-width: 1200px){
    .c-bikecard__icon{
        opacity: 1;
    }

    .c-bikecard__title{
        bottom: 0 !important;
        opacity: 1;
    }
}

.c-bikecard:hover .c-bikecard__icon{
    opacity: 1;
}

.c-bikecard:hover .c-bikecard__title{
    bottom: 0 !important;
    opacity: 1;
}

.c-bikecard--1{
    animation-delay: 0;
}
.c-bikecard--2{
    animation-delay: 250ms !important;
}
.c-bikecard--3{
    animation-delay: 500ms !important;
}

@media (max-width: 1024px){
    .c-bikecard--3{
        animation-delay: 0ms !important;
    }
}
@media (max-width: 768px){
    .c-bikecard--0{
        animation-delay: 0ms !important;
    }
}