/* ==========================================================================
   In the Media — scoped styles
   Everything is namespaced under .itm-page so it won't leak into the theme.
   Move this into the child theme stylesheet if you prefer to keep templates
   markup-only.
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */
.itm-page .itm-hero {
    background-color: #1e1e1e;
    color: #fff;
    padding: 90px 15px 40px;
}
.itm-page .itm-hero__title {
    color: #fff;
    margin-bottom: 20px;
}
.itm-page .itm-hero__intro {
    max-width: 700px;
    margin: 0 auto 30px;
}
.itm-page .itm-hero__video {
    margin-top: 10px;
}
/* Media list -------------------------------------------------------------- */
.itm-page .itm-list {
    padding: 40px 15px;
    background-color: #fff;
}
.itm-page .itm-item {
    padding: 20px 0;
}
.itm-page .itm-item__logo {
    max-height: 250px;
    width: auto;
}
.itm-page .itm-item__title {
    margin-top: 0;
}
.itm-page .itm-item__cta {
    margin-bottom: 0;
}
.itm-page .itm-item__cta a {
    font-weight: 600;
    text-decoration: none;
}
.itm-page .itm-item__cta a:hover {
    text-decoration: underline;
}
.itm-page .iframe-embed {
    position: static;
}

/* Divider between items --------------------------------------------------- */
.itm-page .itm-divider {
    max-width: 60px;
    border: 0;
    border-top: 2px solid rgba(0, 0, 0, .15);
    margin: 20px auto;
}

/* Stack neatly on mobile: media above copy, both centred ------------------ */
@media (max-width: 767.98px) {
    .itm-page .itm-item__media {
        margin-bottom: 20px;
    }
    .itm-page .itm-item__body {
        text-align: center;
    }
}