﻿header,
.section {
    grid-template-columns: auto 1366px auto;
    display: grid;
}

.content {
    display: grid;
    grid-column: 2/3;
    grid-column-gap: 46px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 50px;
    padding-top: 50px;
}

.section .content h2 {
    text-align: center;
}

.section.problem .content h2,
.section.cta .content h2 {
    text-align: left;
}

a {
    color: #c8593b;
}

    a.cta {
        color: #f5f5f5;
        text-decoration: none;
        cursor: pointer;
        border: none;
        border-radius: 12px;
        background-color: #e97c52;
        padding-top: 7px;
        padding-bottom: 9px;
        padding-left: 12px;
        padding-right: 12px;
        justify-self: left;
        align-self: center;
        font-size: 0.95em;
    }


.section .content img.app.cinamatic {
    border-radius: 21px;
}


.section {
    background-color: #f5f5f5;
}

    .section .content h2,
    .section .content h3,
    .section .content p {
        color: #181818;
    }

audio {
    margin-bottom: 24px;
}



    audio::-webkit-media-controls-panel {
        background-color: #222 !important; /* Dark background */
        color: #fff !important;
    }

    audio::-webkit-media-controls-play-button,
    audio::-webkit-media-controls-timeline,
    audio::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display,
    audio::-webkit-media-controls-mute-button,
    audio::-webkit-media-controls-volume-slider {
        filter: invert(1) hue-rotate(180deg);
    }




@media(max-width:1370px) {

    header,
    .section {
        grid-template-columns: auto;
    }

    .content {
        grid-column: 1/2;
    }
}

@media(max-width:1000px) {
    .content {
        grid-column-gap: 34px;
        padding-left: 20px;
        padding-right: 20px;
    }
}



@media (max-width:930px) {
    .content {
        grid-column-gap: 48px;
        padding-left: 40px;
        padding-right: 40px;
    }
}



@media (max-width:600px) {
    .content {
        padding-left: 20px;
        padding-right: 20px;
    }
}
