body[data-color-scheme="light"] #main section h1,
body[data-color-scheme="light"] #main section h2,
body[data-color-scheme="light"] #main section h3 {
    color: #333;
}

.section-hero {
    background: #fff -webkit-linear-gradient(top, #c1e0f6, #fff) top center repeat-x;
    background: #fff linear-gradient(to bottom, #c1e0f6, #fff) top center repeat-x;
}

.section-swift {
    background: #eff6fd;
}

body[data-color-scheme="dark"] .section-swift {
    background: var(--fill-secondary-alt);
}

.grid-box {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    column-gap: 1.5em;
    row-gap: 0.85em;
}

@media (max-width: 1068px) {
    .grid-box {
        grid-template-columns: 60% 40%;
    }
}

@media (max-width: 735px) {
    .grid-box {
        margin-top: 2em !important;
        grid-template-columns: 100%;
    }
}

.code-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.section-content .grid-box .row {
    margin-left: 0;
    margin-right: 0;
}

.icon-app {
    margin-bottom: 1em;
    width: 64px;
    height: 64px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-app:not(:first-of-type) {
    margin-left: 0.5em;
}

/*.===== Images ===== */
.lockup-image-container {
    min-height: 443px;
}

.ipad-image-container {
    min-height: 713px;
}

@media only screen and (max-width: 1068px) {
    .lockup-image-container {
        min-height: 312px;
    }

    .ipad-image-container {
        min-height: 503px;
    }
}

@media only screen and (max-width: 735px) {
    .lockup-image-container {
        min-height: 164px;
    }

    .ipad-image-container {
        min-height: 264px;
    }
}

/* ========== Grid ========== */
#main section.section {
    padding-top: 3em;
    padding-bottom: 3em;
}