@media (max-width: 400px) {
    .account-form {
        width: 100%;
        height: 100%;
        border-radius: 0 !important;
        justify-content: center !important;
        padding: 2rem 1.5rem !important;
    }
    .account-form form {
        width: 100%;
    }
    #account-login .fa.fa-times:before {
        color: white;
    }
}

@media (min-width: 640px) {
    #left-nav .nav-item,
    #popular-queries .nav-item {
        padding: 1rem 2.5rem;
        font-size: 16px;
    }
    #factories-carousel,
    #events-carousel {
        --f-carousel-slide-height: 60%;
        --f-carousel-spacing: 10px;

        --f-carousel-slide-width: calc((100% - var(--f-carousel-spacing) * 2) / 2);

    }

    #currencies .currency {
        font-size: 1rem;
    }
    .f-carousel__slide {
        transform: translateX(-50%);
    }
}

@media (min-width: 768px) {
    .angled-btn {
        padding: 1rem 3rem 1rem 6rem;
    }
    .form-control {
        width: 330px;
    }

    .article-content {
        font-size: 18px;
    }

    #account-register,
    #account-forgotten,
    #account-reset,
    #account-login {
        background: url("/image/bg-pattern.png") repeat #FFFFFF;
    }

    .account-form {
        width: max-content;
        height: max-content;
        border-radius: 1rem;
        justify-content: space-between;
    }

    #close-btn {
        color: #000000;
    }

    #account-register .account-form fieldset {
        display: block;
    }

    #account-register .account-form fieldset .btn-next,
    #account-register .account-form fieldset legend {
        display: none;
    }

}

@media (max-width: 991px) {
    .article-content iframe {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .grid-container {
        display: grid;
        /*grid-template-columns: 314px 1fr 314px;*/
        grid-template-columns: min-content 1fr min-content;
    }

    #currencies {
        padding: 1rem 0;
    }
    #currencies .currency {
        position: static;
        opacity: 1;;
        animation: none;
        font-size: 1rem;
        transform: translate(0);
    }

    #factories-carousel,
    #events-carousel {
        --f-carousel-slide-height: 60%;
        --f-carousel-spacing: 10px;

        --f-carousel-slide-width: calc((100% - var(--f-carousel-spacing) * 2) / 3);

        --f-button-prev-pos: -3rem;
        --f-button-next-pos: -3rem;
    }

    #content-bottom .banner {
        display: none;
    }
}

@media (min-width: 1280px) {
    #factories-carousel,
    #events-carousel {
        --f-carousel-slide-height: 60%;
        --f-carousel-spacing: 10px;

        --f-carousel-slide-width: calc((100% - var(--f-carousel-spacing) * 2) / 4);

        --f-button-prev-pos: -3rem;
        --f-button-next-pos: -3rem;
    }
}

@media (min-width: 1536px) {

}