.locais {
    padding-top: 85px;
}

.locais__column {
    display: grid;
    gap: 15px;
}

.locais__header {
    display: grid;
    height: 121px;
    background: url("/wp-content/themes/vellamar/assets/images/home/locais/litoral.png")
        center center no-repeat;
    background-size: contain;
    place-content: center;
}

.locais__header-title {
    height: 16px;
    color: #00a7a0;
    font-family: var(--font-1);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.locais__header-caption {
    height: 25px;
    color: #000000;
    font-family: Ubuntu;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}

.locais__table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.locais__table-cel:first-child {
    grid-area: 1 / 1 / 2 / 3;
}

.locais__table-cel {
    position: relative;
    display: grid;
    place-content: end start;
    height: 279px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    padding: 15px;
    cursor: pointer;
}

.locais__table-cel-opacity {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(255, 255, 255, 0.1) 100%
    );
    z-index: 2;
    transition: all 200ms linear;
}

.locais__table-cel-title {
    color: #f9fafb;
    font-family: var(--font-3);
    font-size: 22px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 1.1px;
    z-index: 3;
}

.locais__table-cel-label {
    display: none;
    color: #2fc5ab;
    font-family: var(--font-1);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0.8px;
    background-color: transparent;
    border: 2px solid #2fc5ab;
    border-radius: 25px;
    z-index: 3;
    padding: 5px 15px;
    width: max-content;
    cursor: pointer;
    transition: all 200ms linear;
}

.locais__table-cel:hover .locais__table-cel-label {
    color: #00e6da;
    border-color: #00e6da;
}

.locais__table-cel:hover .locais__table-cel-opacity {
    opacity: 0.3;
}

@media (max-device-width: 820px) {
    .locais__table {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-device-width: 768px) {
    .locais__table {
        grid-template-columns: 1fr;
    }

    .locais__table-cel:first-child {
        grid-area: unset;
    }
}