@import '../main.css'; /* MANDATORY */
@import '../elements/button.css';
@import '../elements/card.css';

main > h1 { 
    text-align: center;
    margin-top: 25px;
}

.card:first-child > div:first-child { background-image: url(../../../images/card_bg_green.png); }
.card:nth-child(2) > div:first-child { background-image: url(../../../images/card_bg_blue.png); }

.tools-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.card > div:last-child { 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: start;
    padding: 15px 20px;
}

.card > div:last-child > div > h2,
.card > div > p { 
    margin: 0;
}

.card > div:last-child > div { 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 240px;
    padding-bottom: 15px;
}

.card .button::after { height: 0; }
.card .button {
    width: fit-content;
    height: 25px;
    margin: auto 10px;
    padding: 1px 12px;
    color: var(--str8lines-primary-white);
}

@media (max-width: 480px) {
    .card > div:last-child {
        max-height: 644px;
        height: auto;
    }

    .card > div:last-child > div { 
        flex-direction: column;
        padding-bottom: 8px;
    }
    .card .button { margin: 6px 0; }
}

@media (max-width: 576px){
    main > h1 { margin-top: 30px; }
    .tools-wrapper {
        flex-direction: column;
        justify-content: center;
        margin-top: 15px;
    }

    .card {
        margin: 8px;
        max-width: 340px;
    }

    .card > div:first-child { height: 140px; }
    .card > div:first-child > img { 
        height: 130px;
        width: auto;
        padding: 8px;
    }

    .card > div:last-child > p { font-size: 14px; }
}

@media (min-width: 481px) and (max-width: 576px) {
    .card > div:last-child {
        height: 260px;
        padding: 8px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .tools-wrapper {
        flex-direction: row;
        justify-content: center;
    }
    
    .card {
        margin: 8px;
        max-width: 340px;
    }

    .card > div:first-child { height: 140px; }
    .card > div:first-child > img { 
        height: 130px;
        width: auto;
        padding: 8px;
    }

    .card > div:last-child { 
        height: 340px;
        padding: 8px;
    }
}

@media (max-width: 991px){    
    .card {
        flex-direction: column;
        height: auto;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .tools-wrapper {
        flex-direction: row;
        justify-content: center;
    }
    
    .card {
        margin: 8px;
        max-width: 340px;
    }

    .card > div:first-child { height: 140px; }
    .card > div:first-child > img { 
        height: 130px;
        width: auto;
        padding: 8px;
    }

    .card > div:last-child { height: 315px; }
}