@media all and (min-width: 1440px)
/* Desktop */
    {
    .qualifications-integrations {
        gap: 2%;
    }

    .qualifications {
        grid-column: 1/7;
        line-height: 400%;
        padding-top: 96%;
        padding: 4%;
        margin-top: 5%;
    }

    .exams {
        top: 35%;
        left: 1%;

        img {
            height: 35%;
            width: 35%;
        }
    }

    .integrations {

        grid-column: 7/13;
        line-height: 400%;

        padding-top: 20%;
        margin-top: 5%;
    }

    .qual-tag {
        margin-left: 7%;
    }

    .int-tag {

        margin-right: 7%;
    }

    .qual-text {
        margin-top: 5%;
        font-size: 16pt;
    }

    .int-text {
        margin-top: 10%;
        font-size: 16pt;
    }

    .mb300ret {
        display: none;
    }
}

@media all and (min-width: 1000px) and (max-width: 1440px)
/* tablet landscape */
    {
    .qualifications-integrations {
        gap: 2%;
    }

    .qualifications {
        grid-column: 1/7;
        line-height: 400%;
        padding: 0%;
        margin-top: 5%;
    }

    .exams {
        top: 1%;
        left: 80%;

        img {
            height: 60%;
            width: 60%;
        }
    }

    .integrations {
        grid-column: 7/13;
        line-height: 400%;
        padding: 0%;
        padding-top: 25%;
        padding-bottom: 0;
        margin-top: 5%;
    }

    .qual-tag {
        margin-left: 7%;
    }

    .int-tag {
        margin-right: 7%;
    }

    .qual-text {
        margin-top: 10%;
        font-size: 14pt;
        padding-bottom: 5%;
    }

    .int-text {
        margin-top: 10%;
        font-size: 14pt;
    }

    .mb300ret {
        display: none;
    }
}

@media all and (min-width: 738px) and (max-width: 1000px)
/* tablet */
    {
    .qualifications-integrations {
        gap: 2%;
    }

    .qualifications {
        grid-column: 1/7;
        line-height: 200%;
        margin-top: 5%;
    }

    .integrations {
        margin-top: 5%;
        grid-column: 7/13;
        line-height: 200%;
        padding: 5%;
        padding-top: 15%;
    }

    .qual-tag {
        margin-left: 10%;
    }

    .int-tag {
        margin-right: 10%;
    }

    .qual-text {
        margin-top: 15%;
        font-size: 12pt;
    }

    .int-text {
        margin-top: 20%;
        font-size: 12pt;
    }

    .mb300 {
        display: none;
    }

    .mb300ret {
        line-height: 125%;
    }

    .exams {
        top: 35%;
        left: 2%;

        img {
            height: 30%;
            width: 30%;
        }
    }
}

@media all and (min-width: 50px) and (max-width: 738px)
/* phone */
    {
    .qualifications {
        grid-column: 1/13;
        line-height: 200%;
        padding: 2%;
        margin-top: 2%;
    }

    .integrations {
        margin-top: 2%;
        grid-column: 1/13;
        line-height: 200%;
        padding: 5%;
    }

    .qual-text {
        margin-top: 10%;
        grid-column: 1/13;
        font-size: 12pt;
    }

    .int-text {
        margin-top: 10%;
        grid-column: 1/13;
        font-size: 12pt;
    }

    .mb300 {
        display: none;
    }

    .exams {
        top: 35%;
        left: 5%;

        img {
            height: 30%;
            width: 30%;
        }
    }
}

.qualifications-integrations {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    color: white;
}

.exams {
    text-align: left;
    position: absolute;
    filter: drop-shadow(8.0px 16.0px 16.0px hsl(0deg 0% 0% / 0.25));
    opacity: 0.6;
}

.qualifications {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    background-color: var(--FLGrey);
    border-radius: 40px;
    text-align: center;
}

.qual-text {
    padding-top: 2%;
    grid-column: 1/13;
}

.exams {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    position: absolute;
    filter: drop-shadow(8.0px 16.0px 16.0px hsl(0deg 0% 0% / 0.25));
    opacity: 0.6;
}

.int-text {
    grid-column: 1/13;
}

.qual-tag {
    background-color: var(--DarkBlue);
    color: var(--White);
}

.int-tag {
    background-color: var(--Stone);
    color: var(--FLGrey);
}

.integrations {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    background-color: var(--FLGrey);
    border-radius: 40px;
    text-align: center;
}