/*
 * 320px — 480px: Mobile devices.
 * 481px — 768px: iPads, Tablets.
 * 769px — 1024px: Small screens, laptops.
 * 1025px — 1200px: Desktops, large screens.
 * 1201px and more — Extra large screens, TV.
*/

@media screen and (min-width: 320px) and (max-width: 480px) {
    html {
        font-size: 52%;
    }

    .row {
        width: calc(100% - 6rem);
    }

    .raffle-draw-header h1 {
        font-size: 2.5rem;
    }

    .raffle-draw-content {
        grid-template: repeat(2, 1fr) / auto;
        grid-gap: 3rem;
    }

    .form-group,
    .form-group ul,
    .raffle-draw-output-container {
        align-items: center;
    }

    .form-group textarea {
        width: 100%;
    }

    .raffle-draw-author {
        padding-top: 0;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    html {
        font-size: 62%;
    }

    .row {
        width: calc(100% - 6rem);
    }

    .raffle-draw-content {
        grid-template: repeat(2, 1fr) / auto;
        grid-gap: 3rem;
    }

    .form-group,
    .form-group ul,
    .raffle-draw-output-container {
        align-items: center;
    }

    .raffle-draw-author {
        padding-top: 0;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 70%;
    }

    .row {
        width: calc(100% - 6rem);
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .row {
        width: calc(100% - 6rem);
    }
}

@media screen and (min-width: 1201px) {
}