.wrapper {

    width          : 100%;
    /* display        : flex;
    flex-wrap      : wrap;
    justify-content: space-evenly;
    align-items    : center;
    gap            : 20px; */
    text-align: center;
    padding: 40px;
    box-sizing: border-box;

    img {
        width        : 30%;
        border-radius: 20px;
    }

    .grid {
        margin: 0 auto;
        width: fit-content;
    }


    .griditem {
       width: calc((100vw - 160px) / 3);
       margin-bottom: 40px;
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       
       p{
        color: white;
        font-size: 12px;
        line-height: 160%;
        margin-top: 10px;
        margin-bottom: 10px;
        display: block;
        width: 100%;

       }

       a{

        padding:15px 15px;
        background-color: rgb(0, 111, 151);
        color: white;
        font-weight: bold;
        font-size: 12px;
        border-radius: 30px;
        margin-top: 10px;
        text-decoration: none;
        display: block;
        transition: all 0.3s ease;

        &:hover{

            background-color: rgb(46, 138, 172);
        }
       }
    }

    @media (max-width: 768px) {

        padding: 0px;

        .griditem {
            width: 100%;
            margin-bottom: 10px;
        }

        img{
            width: 100%;
        }
    }


    .griditem img,.griditem video {
        width  : 100%;
        display: block;
        border-radius: 20px;
    }
}

body {

    background-color: black;
}