body {
    margin: 0;
}

.wrapper {
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    aspect-ratio: 5750/4167;
    background-image: url('background.png');
    background-position: center;
    background-size: contain;
    width: 575px;
}
@media screen and (min-width: 1200px) {
    .wrapper {
        width: 1150px;
    }
}

.room-link {
    position: absolute;
    box-sizing: border-box;
    --s: -1px;
    --shape: 0 0, 100% 0, 100% 100%, 0 100%, 0 0;
    clip-path: polygon(var(--shape));
}
.room-link::before {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    clip-path: polygon(evenodd, var(--s) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) var(--s), var(--shape)) content-box;
    padding: calc(-1 * var(--s));
    background-color: orange;
    display: block;
    content: "";
    opacity: 0.4;
}
.room-link:hover {
    --s: -2px;
}
.room-link:hover::before {
    opacity: 0.75;
}

.links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}