/* Offsets */
@media (max-width: 1440px) {
    .layout-desktop img.hide-on-tablet {
        width: 300px;
    }
}

.display-on-tablet {
    display: none;
}

.menu-container-mobile {
    opacity: 0;
    z-index: -1;
    display: flex;
    position: absolute;
    top: 100%;
    right: 32px;
    max-width: 300px;
    width: 100%;
    border-radius: 16px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: #fff;
    padding: 32px;
    transition: opacity 0.2s ease-in-out;
    a {
        color: var(--color-text-dark);
        text-decoration: none;
    }
}

@media (max-width: 1280px) {
    .first-block {
        margin-top: 250px;
    }
    .layout-desktop {
        flex-direction: column;
    }
}

@media (max-width: 960px) {
    .layout {
        flex-direction: column;
    }
    body .card-container {
        flex-direction: column;
        &.banner {
            position: relative;
            transform: none;
            margin: 0 auto;
            left: 0;
            margin-top: 32px;
            justify-content: center;
            align-items: center;
        }
    }
    .app-preview-1 {
        position: relative;
        top: 0;
        margin-top: 50px;
    }
    .display-on-tablet {
        display: block;
    }
    .hide-on-tablet {
        display: none;
    }
    .subscription-card {
        width: 100%;
    }
    .subscription-card .subscription-card-description {
        grid-template-columns: 1fr;
    }
    .media-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin: 0 auto;
        :nth-child(10) {
            grid-column-start: 2;
        }
    }
    .switch-on-tablet {
        flex-direction: column-reverse;
    }
    .combined-pictures .leafs {
        top: -5px;
    }
    .menu-container::before {
        content: "\f479";
        width: 40px;
        height: 40px;
        font-size: 40px;
        cursor: pointer;
        color: #fff;
    }

    .legal-menu .menu-container::before {
        color: var(--color-text-dark);
    }

    .menu-container-mobile.active {
        z-index: 9000;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .orange-bg {
        padding-bottom: 64px;
    }
    .menu-container-mobile {
        max-width: 300px;
    }
    .tomato-container {
        width: 30%;
    }
    .menu-container a {
        display: none;
    }
    .container {
        padding: 0 32px;
    }
    .cta-card {
        padding: 32px 16px;
    }
    .veggies-bg {
        display: none;
    }
    .veggies {
        display: none;
    }

    .block-grid {
        grid-template-columns: 1fr !important;
    }

    body .first-block {
        margin-top: 100px;
    }

    body .text-primary,
    body .text-secondary {
        color: var(--color-text-dark) !important;
    }

    .card {
        width: 100%;
    }
    .card-column {
        align-items: center;
    }

    .image-bg-container-2 {
        padding: 250px 0;
    }
    .veggies-bg-container {
        padding-top: 100px;
    }

    body .card-column.margin-top-40 {
        margin-top: 0;
    }
    footer .top {
        flex-direction: column;
        gap: 16px;
    }
    footer .bottom .link-container {
        gap: 8px;
        flex-direction: column;
    }
    footer .bottom .first-line {
        flex-direction: column;
    }
}

/* Ranges */
@media (min-width: 1440px) and (max-width: 1920px) {
    .tomato-container {
        width: 200px;
        height: auto;
    }
}

@media (min-width: 960px) and (max-width: 1440px) {
    .tomato-container {
        width: 200px;
        height: auto;
    }
    .veggies-bg {
        width: 200px;
    }

    .media-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin: 0 auto;
        justify-content: center;
        :nth-child(9) {
            grid-column-start: 2;
        }
        :nth-child(10) {
            grid-column-start: 3;
        }
    }
}

@media (min-width: 768px) and (max-width: 960px) {
    .veggies-bg {
        display: none;
    }

    .block-grid {
        grid-template-columns: 1fr !important;
    }

    .first-section {
        padding-top: 0px;
    }

    body .first-block {
        margin-top: 250px;
    }

    .card-column {
        align-items: center;
    }

    body .card-column.margin-top-40 {
        margin-top: 0;
    }
}