@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap');

:root {
    --transition-time: 2.3s;
}

.contenedor{   
    scroll-behavior: smooth;
}
.contenedor .ir {
    display: none;
}

.contenedor .arriba {
    background-color:#e4b233;
    border: 2px solid #e4b233;
    color: aliceblue;
    padding: 10px;
    width: 50px;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    position:fixed;
    bottom: 15px;
    right:20px;
    transition: .5s all ease;
    animation: subir 1s infinite alternate;
    cursor: pointer;
}

.contenedor .arriba:hover {
    background-color: aliceblue;
    color: #e4b233;
}

@keyframes subir {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-15px);
    }
}

.image-section {
    width: 90%;
    max-width: 1200px;
    margin: 0px auto;

    .row {
        align-items: center;
    }
}


.card {
    background-color: rgba(0, 0, 0, 0.479);
    position: relative;
    height: 400px;
    width: 100%;
    margin: 10px 0;
    transition: ease all var(--transition-time);
    perspective: 1200px;

    &:hover {
        .cover {
            transform: rotateX(0deg) rotateY(-180deg);

            &:before {
                transform: translateZ(30px);
            }

            &:after {
                background-color: black;
            }

            h1 {
                transform: translateZ(100px);
            }

            .price {
                transform: translateZ(60px);
            }

            a {
                transform: translateZ(-60px) rotatey(-180deg);
            }
        }
    }

    .cover {
        position: absolute;
        height: 100%;
        width: 100%;
        transform-style: preserve-3d;
        transition: ease all var(--transition-time);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        &:before {
            content: '';
            position: absolute;
            border: 5px solid rgba(255, 255, 255, .5);
            box-shadow: 0 0 12px rgba(0, 0, 0, .3);
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            z-index: 2;
            transition: ease all var(--transition-time);
            transform-style: preserve-3d;
            transform: translateZ(0px);
        }

        &:after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: 2;
            transition: ease all 1.3s;
            background: rgba(0, 0, 0, 0.212);
        }

        &.item-a {
            background-image: url(../img/speakers/speaker-1.jpg);
        }

        &.item-b {
            background-image: url(../img/speakers/speaker-2.png);
        }

        &.item-c {
            background-image: url(../img/speakers/speaker-3.png);
        }

        &.item-d {
            background-image: url(../img/speakers/speaker-4.jpg);
        }
        &.item-e {
            background-image: url(../img/speakers/speaker-5.png);
        }
        &.item-f {
            background-image: url(../img/speakers/speaker-6.png);
        }
        &.item-g {
            background-image: url(../img/speakers/speaker-7.png);
        }
        &.item-h {
            background-image: url(../img/speakers/speaker-8.png);
        }
        &.item-i {
            background-image: url(../img/speakers/speaker-9.png);
        }
        &.item-j {
            background-image: url(../img/speakers/speaker-10.png);
        }
        &.item-k {
            background-image: url(../img/speakers/speaker-11.png);
        }
        &.item-l {
            background-image: url(../img/speakers/speaker-12.png);
        }
        &.item-m {
            background-image: url(../img/speakers/speaker-13.png);
        }
        &.item-n {
            background-image: url(../img/speakers/speaker-14.png);
        }
        &.item-o {
            background-image: url(../img/speakers/speaker-15.png);
        }
        &.item-p {
            background-image: url(../img/speakers/speaker-16.png);
        }
        &.item-q {
            background-image: url(../img/speakers/speaker-17.png);
        }
        &.item-r {
            background-image: url(../img/speakers/speaker-18.png);
        }
        &.item-s {
            background-image: url(../img/speakers/speaker-19.png);
        }
        &.item-t {
            background-image: url(../img/speakers/speaker-20.png);
        }
		&.item-u {
            background-image: url(../img/speakers/speaker-21.png);
        }
      	&.item-v {
            background-image: url(../img/speakers/speaker-22.png);
        }
      	&.item-x {
            background-image: url(../img/speakers/speaker-23.png);
        }
      &.item-y {
            background-image: url(../img/speakers/speaker-24.png);
        }

        h1 {
            font-family: 'Oswald', sans-serif;
            font-weight: 600;
            position: absolute;
            bottom: 55px;
            left: 50px;
            color: white;
            transform-style: preserve-3d;
            transition: ease all var(--transition-time);
            z-index: 3;
            font-size: 3em;
            transform: translateZ(0px);
        }

        .price {
            font-weight: 200;
            position: absolute;
            top: 55px;
            right: 50px;
            color: white;
            transform-style: preserve-3d;
            transition: ease all var(--transition-time);
            z-index: 4;
            font-size: 2em;
            transform: translateZ(0px);
        }
    }

    .card-back {
        position: absolute;
        height: 100%;
        width: 100%;
        background: #0b0f08;
        transform-style: preserve-3d;
        transition: ease all var(--transition-time);
        transform: translateZ(-1px);
        display: flex;
        align-items: center;
        justify-content: center;

        a {
            transform-style: preserve-3d;
            transition: ease transform var(--transition-time), ease background .5s;
            transform: translateZ(-1px) rotatey(-180deg);
            background: transparent;
            border: 1px solid white;
            font-family: 'Oswald', sans-serif;
            font-weight: 200;
            font-size: 1.3em;
            color: white;
            padding: 14px 32px;
            outline: none;
            text-decoration: none;

            &:hover {
                background-color: white;
                color: #0b0f08;
            }
        }

        p {
            margin-bottom: 200px;
            transform-style: preserve-3d;
            transition: ease transform var(--transition-time), ease background .5s;
            transform: translateZ(-1px) rotatey(-180deg);
            background: transparent;
            border: 1px solid white;
            font-family: 'Oswald', sans-serif;
            font-weight: 200;
            font-size: 1.3em;
            color: white;
            padding: 14px 32px;

            &:hover {
                background-color: white;
                color: #0b0f08;
            }
        }
    }
}