/* DRA: Distro Reseller Advantage */

.text {
    background-color: black;
    background-size: cover;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7rem;
}
.text h2 {
    font-weight: 400;
}
.text .top .draLogo {
    transform: translateY(-50%);
    background-color: #006838;
    color: #eed766;
    margin: 1vw auto;
    border-radius: 0.75vw;
    width: fit-content;
}
.text .top .draLogo p {
    padding: 0vw 1.5vw;
}
.draInfo {
    background-image: url("../images/dra/warehouse-2.png");
    background-color: rgb(47, 72, 30);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}
.draInfo .topicTitle {
    padding-left: 5px;
    border-left: 2px solid #eed766;
    font-weight: 500;
}
.draInfo .draInfoTopicInfo {
    padding-bottom: 2.5vw;
}

.card {
    text-align: center;
    background-color: transparent;
    color: white;
    border: none;
}
.card-img-top {
    border-radius: 0.375rem !important;
}
/* <------------- Mobile -------------> */
@media screen and (max-width: 576px) {
    .draInfo .topicTitle {
        font-size: 5vw;
    }
    .draInfo .draInfoTopic .draInfoTopicInfo {
        font-size: 4vw;
    }
    .card {
        height: 100vw;
    }
    .draCarouselImg {
        margin: auto;
    }
    .card .card-title {
        font-size: 5vw;
    }
    .card .card-text {
        font-size: 4vw;
    }
    .text .top .draLogo p {
        font-size: 9vw;
    }
    .text .top p {
        font-size: 6vw;
    }
    #rsa-info-cont {
        display: grid;
        grid-template-rows: max-content max-content;
        grid-template-areas:
            "slide"
            "info";
    }
    #rsa-info {
        grid-area: info;
    }
    #rsa-slider {
        grid-area: slide;
        padding: 0 !important;
    }
    .card-img-top {
        border-radius: 0 !important;
    }
}

/* <------------- something else -------------> */

@media screen and (max-width: 766px) and (min-width: 577px) {
    .draInfo .topicTitle {
        font-size: 5vw;
    }
    .draInfo .draInfoTopic .draInfoTopicInfo {
        font-size: 4vw;
    }
    .card {
        height: 52vw;
    }
    .draCarouselImg {
        width: 40vw;
        margin: auto;
    }
    .card .card-title {
        font-size: 5vw;
    }
    .card .card-text {
        font-size: 4vw;
    }
    .text .top .draLogo p {
        font-size: 9vw;
    }
    .text .top p {
        font-size: 6vw;
    }
}

/* <------------- Tablet -------------> */
@media screen and (max-width: 992px) and (min-width: 767px) {
    .draInfo .topicTitle {
        font-size: 2.5vw;
    }
    .draInfo .draInfoTopic .draInfoTopicInfo {
        font-size: 2vw;
    }
    .card {
        height: 52vw;
    }

    .card .card-title {
        font-size: 2.5vw;
    }
    .card .card-text {
        font-size: 2vw;
    }
    .text .top .draLogo p {
        font-size: 6vw;
    }
    .text .top p {
        font-size: 3vw;
    }
}
/* <------------- Laptop -------------> */
@media screen and (max-width: 1200px) and (min-width: 993px) {
    .draInfo .topicTitle {
        font-size: 2vw;
    }
    .draInfo .draInfoTopic .draInfoTopicInfo {
        font-size: 1.6vw;
    }
    .card {
        height: 50vw;
    }
    .card .card-title {
        font-size: 2.5vw;
    }
    .card .card-text {
        font-size: 2vw;
    }
    .text .top .draLogo p {
        font-size: 7vw;
    }
    .text .top p {
        font-size: 3vw;
    }
}

@media screen and (min-width: 1201px) {
    .draInfo .topicTitle {
        font-size: 1.2vw;
    }
    .draInfo .draInfoTopic .draInfoTopicInfo {
        font-size: 0.8vw;
    }
    .card {
        height: 25vw;
    }
    .card .card-title {
        font-size: 1.2vw;
    }
    .card .card-text {
        font-size: 0.8vw;
    }
    .text .top .draLogo p {
        font-size: 4vw;
    }
    .text .top p {
        font-size: 2vw;
    }
}