﻿.event-ticket {
    display: grid;
    grid-template-columns: 60% 1fr auto;
    grid-template-rows: 1fr;
}

.event-ticket__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.event-ticket__item:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.event-ticket__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

[data-ticketing-container] {
    display: grid;
    grid-template-rows: 1fr;
}

[data-ticketing-container], [data-ticketing-step] {
    transition: transform .5s ease, opacity .75s ease, height .5s ease;
}

[data-ticketing-step] {
    opacity: 0;
    transform: translateX(150%);
}

.is-complete[data-ticketing-step] {
    opacity: 0;
    transform: translateX(-150%);
}

.is-active[data-ticketing-step] {
    opacity: 1;
    transform: translateX(0%);
}

@media only screen and (max-width: 991.98px){
    .event-ticket {
        display: grid;
        grid-template-columns: 75% 1fr;
        grid-template-rows: 1fr auto;
    }

    .event-ticket__item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .event-ticket__item:nth-child(3) {
        grid-column: 2;
        grid-row: 1/3;
    }

    .event-ticket__item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    [data-ticketing-container] {
        display: grid;
        grid-template-rows: auto 1fr;
    }
}

@media only screen and (max-width: 767.98px) {
    [data-ticketing-container] {
        display: grid;
        grid-template-rows: auto 1fr;
    }
}

@media only screen and (min-width: 768px) {
    .overflow-md-hidden {
        overflow: hidden;
    }
}
