<template>
	<div class="map-wrapper">
		<img src="g7-map.svg">
		<div class="rooms">
			<span class="title">Rooms</span>
			<ol>
				<li
					:key="room"
					v-for="room in rooms"
				>
					{{ room }}
				</li>
			</ol>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent(
	{
		name: "G7Map",
		data() {
			return {
				rooms: [
					"Studio / G3",
					"Studio 1",
					"Hall",
					"Studio 2",
					"Studio 3",
					"Grupprum",
					"Verkstad",
					"Serverrum",
					"Kurator",
					"Pannrum",
					"Toalett",
					"Inspelningsbås",
					"G2",
					"Trapphus"
				]
			};
		}
	}
);
</script>

<style scoped lang="scss">
@use "sass:map";

@use "@/scss/colors";

@import "@/scss/breakpoints";

.map-wrapper {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5em;
    column-gap: 10em;

    img {
        max-width: 50%;
    }

    .rooms {
        min-width: 40%;

        ol li {
            line-height: 1.75em;
        }

        .title {
            font-size: 2rem;
            font-weight: 700;
            color: colors.$primary;
        }
    }
}

@media (max-width: map.get($breakpoints, "xl")) {
    .map-wrapper img {
        max-width: 90%;
    }
}
</style>
