/* Import CSS Variables */
@import url(../../css/partials/_variables.css);

/* Import CSS Global */
@import url(../../css/partials/_global.css);

/* Import CSS Addons */
@import url(../../css/partials/_addons.css);

/* Import CSS Header */
@import url(../../css/header.css);

/* Import CSS Footer */
@import url(../../css/footer.css);


main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main p, main li {
    font-size: 15px;
    text-align: justify;
    text-align-last: center;
}


/* Intro */
main .cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 80rem;
    background-color: var(--color-secondary);
    /* transform: skewX(-10deg); */
    border: 2px solid var(--color-dark);
    box-shadow: var(--box-shadow-arround);
    transition: all 0.8s ease;
    margin-bottom: 1.5rem;
}

main .cont:hover {
    transform: skewX(0deg);
    border-color: var(--color-dark);
    box-shadow: none;
}

main .cont div {
    display: grid;
    grid-template-columns: 50% 50%;
    overflow: hidden;
}

main .cont .text-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: justify;
    padding: 2rem;
    gap: 1rem;
}

main .cont .top-div .text-holder p {
    text-align: center;
}

main .cont .top-div .text-holder h1 {
    position: relative;
    text-align: center;
    max-width: 100%;
    width: max-content;
    overflow-wrap: break-word;
    word-wrap: break-word;
    border-bottom: 2px solid transparent;
}

main .cont .img-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 25rem;
    position: relative;
}

main .cont .img-holder img {
    height: 25rem;
    width: auto;
    transition: all 0.8s ease;
}

main .cont .img-holder img:hover {
    transform: scale(1.1);
}


/* Assortment Cont */
main .assortment-cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    max-width: 80rem;
    margin: 2rem 0;
    padding: 2rem 1rem;
    border-top: 4px dotted var(--color-dark);
}


/* Brands Cont */
main .brands-cont {
    max-width: 80rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

main .brands-cont>div:last-child {
    grid-column: 2;
}

main .brands-cont .brand-card {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

main .brands-cont .brand-card:after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0 14px 50px -4px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4);
}

main .brands-cont .brand-card:hover {
    transform: translateZ(0px);
}

main .brands-cont .brand-card:hover:after {
    opacity: 1;
}

main .brands-cont .item {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr;
    background-color: var(--color-secondary);
    padding: 1rem;
    box-shadow: var(--box-shadow-arround);
    border: 2px solid var(--color-dark);
    transition: all 300ms ease;
}

main .brands-cont .item:hover {
    scale: 0.95;
    box-shadow: none;
    border-color: var(--color-dark);
}

main .brands-cont .text-holder {
    padding: 0.5rem;
    border: 4px solid var(--color-dark);
    text-align: justify;
    display: none !important;
}

main .brands-cont .img-holder{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: white;
}

main .brands-cont .img-holder img{
    width: 100%;
    height: auto;
    background-color: white;
}



main .active {
    transform: translateZ(0px) rotateY(180deg) !important;
}

main .active:after {
    display: none;
}

main .brand-card .item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

main .brand-card .front {
    z-index: 2;
}

main .brand-card .back {
    transform: rotateY(180deg);
}

main .back {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

main .back h1 {
    text-align: center;
}

main .back ul {
    margin: 0 auto;
}



/* ============================== Media Query ============================== */
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 1024px) {
    main p {
        font-size: 14px;
    }

    main .brands-cont {
        grid-template-columns: repeat(2, 1fr);
    }

    main .brands-cont>div:nth-child(3n - 1):last-child {
        grid-column: span 2;
        width: 50%;
        margin: 0 25%;
    }
}

/* Extra small devices (phones, 413px and down) */
@media only screen and (max-width: 800px) {

    main .cont div {
        grid-template-columns: 100%;
    }

    main .cont .bottom-div {
        display: flex;
        flex-direction: column-reverse;
    }

    main .cont .text-holder {
        padding: 1rem !important;
    }

    main .cont .img-holder {
        overflow: hidden;
        max-height: 20rem;
        margin: 1rem 1rem !important
    }

    main .cont .img-holder img {
        width: 100%;
        height: auto;
    }
}


/* Extra small devices (phones, 413px and down) */
@media only screen and (max-width: 600px) {
    main .brands-cont {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    main .brands-cont>div:nth-child(3n - 1):last-child {
        width: 100%;
        margin: 0;
    }
}