:root {
    --amarelo-cy: #F2E205;
    --amarelo-queimado: #8C8303;
    --roxo-cy: #460273;
    --branco-cy: #F2F2E9;
    --preto-cy: #0d0d0d;
    --fonte: "Chakra Petch", serif;
}

.instagram-media {
    padding: 15px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 15px !important;
    margin: 20px;
}

.eventos {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    background: linear-gradient(to bottom, var(--preto-cy), var(--roxo-cy));
}

.eventos h1 {
    padding: 30px;
    font-size: clamp(20px, 6vw, 42px);
    color: var(--amarelo-cy);
}

.posts {
    max-height: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.contorno {
    --background: linear-gradient(to left, #8C8303 0%, #F2E205 100%);
    border-radius: 1rem;
    overflow: visible;
    padding: 5px;
    background: var(--background);
    position: relative;
    z-index: 1;
}

.contorno::after {
    position: absolute;
    content: "";
    top: 30px;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    transform: scale(0.8);
    filter: blur(25px);
    background: #f7ba2b;
    background: var(--background);
    transition: opacity .5s;
}

.contorno-info {
    display: flex;
    justify-content: center;
    max-width: clamp(150px, 25vw, 300px) !important;
    max-height: clamp(300px, 30vw, 700px) !important;
    overflow: visible;
    border-radius: .7rem;
}

.contorno h2 {
    font-size: 1.2rem;
    padding: 5px;
}

/*Hover*/
.contorno:hover::after {
    opacity: 0 !important;
}

.contorno:hover .contorno-info {
    color: #f7ba2b;
    transition: color 1s;
}