@font-face {
    font-family: "Gotham Bold";
    src: url(https://25ans.tpf.ch/assets/fonts/Gotham-Bold.ttf);
}

:root {

  --tpf-red: #AA0A2E;

  --swiper-theme-color: var(--tpf-red);

  --swiper-navigation-sides-offset: -40px;
  --swiper-navigation-size: 40px;
}

.mint-section-wrapper{
    font-family: "Gotham A", "Gotham B", "Gotham Bold", Arial, sans-serif;
    font-weight: 500;
    position: relative;
}

.mint-slider-wrapper{
    position: relative;
}

.mint-section-wrapper .slider-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 2em;
}


.mint-slider-wrapper .swiper{
    box-sizing: border-box;
    width: 100%;
    padding: 6px;
}

.mint-slider-wrapper .swiper .swiper-slide{
    aspect-ratio: 3/4;
    background-color: white;
    box-shadow: 0 0 5px rgba(136, 136, 136, 0.5);
    /* min-width: 310px; */

    position: relative;
    padding: 25px;
    overflow: hidden;
    box-sizing: border-box;
    user-select: none;
}

@media screen and (min-width: 770px) {

    .mint-slider-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper{
        gap: 1em;
    }

    .mint-slider-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper .swiper-slide{
        width: calc(100% / 2 - 1em);
    }
}

@media screen and (min-width: 1200px) {

    .mint-slider-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper{
        gap: 1em;
    }

    .mint-slider-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper .swiper-slide{
        width: calc(100% / 3 - 2em);
    }
}

.mint-slider-wrapper .swiper .swiper-slide.active{
    background-color: var(--tpf-red);
    background-image: url(images/background.png);
    background-size: cover;
    background-position: center;
    color: white;
}

.mint-slider-wrapper .swiper .swiper-slide.active .title{
    color: white !important;
}

.mint-slider-wrapper .swiper .swiper-slide .day{
    font-size: 20px;
}

.mint-slider-wrapper .swiper .swiper-slide .title{
    font-size: 24px;
    line-height: 1em;
    margin: 1.33em 0;
}

.mint-slider-wrapper .swiper .swiper-slide .button{
    display: none;
    border-radius: 500px;
    color: white;
    background-color: lightgray;
    padding: 15px 30px;
    font-size: 18px;
    text-decoration: none;
    width: fit-content;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.mint-slider-wrapper .swiper .swiper-slide.past .button.past,
.mint-slider-wrapper .swiper .swiper-slide.next .button.next{
    display: block;
}
.mint-slider-wrapper .swiper .swiper-slide.active .button.active{
    display: block;
    background-color: white;
    color: var(--tpf-red);
    pointer-events: all;
}

/* .mint-slider-wrapper .swiper .swiper-slide.soon .button.active{
    display: none;
} */


.mint-slider-wrapper .swiper .swiper-slide .img-wrapper{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(20%, 40%);
    overflow: hidden;
    width: 80%;
    height: auto;
    aspect-ratio: 1;
    /* background-color: rgb(245, 245, 245); */
    /* border: 3px solid var(--tpf-red); */
    border-radius: 1000px;
    position: absolute;
}
.mint-slider-wrapper .swiper .swiper-slide.active .img-wrapper{
    background-color: white;
    /* border-color: white; */
}

.mint-slider-wrapper .swiper .swiper-slide .img-wrapper img{
    width: 60%;
    position: absolute;
    top: 15%;
    left: 15%;
    aspect-ratio: 16/10;
    object-fit: contain;
}


@media screen and (max-width: 1200px) {
    .mint-slider-wrapper .swiper-buttons-wrapper {
        display: flex;
        justify-content: end;
        gap: var(--swiper-navigation-size);
        height: var(--swiper-navigation-size);
        margin-top: 15px;
    }
    .mint-slider-wrapper .swiper-button-next, .swiper-button-prev{
        display: inline-block;
        position: relative;
        left: unset;
        right: unset;
    }
}