:root {
    --red: hsl(355, 63%, 49%);
    --orange: hsl(19, 100%, 50%);
    --yellow: hsl(45, 100%, 60%);
    --green: hsl(160, 100%, 31%);
    --blue: hsl(213, 100%, 31%);
    --background-blue: hsl(200, 87%, 91%);
    --black: hsl(213, 8%, 26%);
    --shadow: hsla(213, 100%, 62%);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'SeoulHangangTall', 'Source Sans Pro', sans-serif;
    font-size: 14px;
    color: var(--black);
    width: 100%;
    height: 100%;
}


.header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0 0;
    margin: 0 0 28px 0;
    height: 100vh;
    width: 100%;
    overflow: visible;
    background-image: url('/image/landing-pro.jpg');
    background-size: cover;
    background-position: center;
}
.header__title {
    grid-area: 1 / 1 / 2 / 2;
    text-align: center;
    color: white;
    margin-top: 28px;
}
.header__title > h1, .header__title > h3 {
    margin: 8px 0;
}
@media (min-aspect-ratio: 1) {
    .header {
        height: 1400px;
    }
    .header__title {
        margin-top:56px;
    }
    .header__title > h1, .header__title > h3 {
        margin: 16px;
    }
}


.main {
    display: grid;
    grid-template-areas:
        "invitation invitation invitation invitation"
        "rsvp rsvp rsvp rsvp"
        "schedule schedule schedule schedule"
        "venue venue venue venue"
        "gallery gallery gallery gallery";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0;
    margin: auto auto;
    width: min(560px, 100%);
    padding: 0;
    z-index: 30;
    position: relative;
    overflow: visible;
}

.main__invitation { grid-area: invitation; }
.main__rsvp { grid-area: rsvp; }
.main__schedule { grid-area: schedule; }
.main__venue { grid-area: venue; }
.main__gallery { grid-area: gallery; }


.invitation {
    margin: 28px 56px 28px 56px;
    text-align: center;
}

.rsvp {
    margin: 28px 56px 28px 56px;
}

.rsvp__link {
    border: 4px solid var(--blue);
    border-radius: 4px;
    padding: 0 28px;
    margin: 28px 0 0 0;
    display: block;
    text-decoration: none;
    color: var(--blue);
    text-align: center;
    background-color: var(--background-blue);
    box-shadow: 0 0 8px var(--shadow);
}

.schedule {
    margin: 28px 56px 28px 56px;
}
.schedule__list {
    padding-left: 28px;
}

.venue {
    display: grid;
    grid-template-areas:
        "content"
        "map";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    margin: 28px 0 28px 0;
}
.venue__content {
    margin: 0 56px 28px 56px;
    grid-area: "header";
}
.venue__map {
    grid-area: "map";
    height: 600px;
}

.gallery {
    display: grid;
    grid-template-areas:
        "heading heading heading"
        "main main main"
        "one two three"
        "four five six"
        "seven eight nine";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    column-gap: 8px;
    row-gap: 8px;
    margin: 28px 56px 56px 56px;

    --url-one: url('/image/J1066__web.jpg');
    --url-two: url('/image/J0050__web.jpg');
    --url-three: url('/image/J1182__web.jpg');
    --url-four: url('/image/J1419__web.jpg');
    --url-five: url('/image/J1660__web.jpg');
    --url-six: url('/image/J2822__web.jpg');
    --url-seven: url('/image/J2945__web.jpg');
    --url-eight: url('/image/J3016__web.jpg');
    --url-nine: url('/image/J3422__web.jpg');
}

.gallery__heading {
    grid-area: heading;
}

.gallery__main {
    grid-area: main;
    background-color: var(--blue);
    width: 100%;
    border-radius: 4px;
}
.gallery__one:checked ~ .gallery__main {
    content: var(--url-one);
}
.gallery__two:checked ~ .gallery__main {
    content: var(--url-two);
}
.gallery__three:checked ~ .gallery__main {
    content: var(--url-three);
}
.gallery__four:checked ~ .gallery__main {
    content: var(--url-four);
}
.gallery__five:checked ~ .gallery__main {
    content: var(--url-five);
}
.gallery__six:checked ~ .gallery__main {
    content: var(--url-six);
}
.gallery__seven:checked ~ .gallery__main {
    content: var(--url-seven);
}
.gallery__eight:checked ~ .gallery__main {
    content: var(--url-eight);
}
.gallery__nine:checked ~ .gallery__main {
    content: var(--url-nine);
}

.gallery__thumb {
    background-color: var(--blue);
    appearance: none;
    width: 100%;
    height: 144px;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    object-fit: cover;
    opacity: 0.5;
    border-radius: 4px;
    cursor: zoom-in;
}
.gallery__thumb:checked {
    opacity: 1.0;
}
.gallery__one {
    grid-area: one;
    content: var(--url-one);
}
.gallery__two {
    grid-area: two;
    content: var(--url-two);
}
.gallery__three {
    grid-area: three;
    content: var(--url-three);
}
.gallery__four {
    grid-area: four;
    content: var(--url-four);
}
.gallery__five {
    grid-area: five;
    content: var(--url-five);
}
.gallery__six {
    grid-area: six;
    content: var(--url-six);
}
.gallery__seven {
    grid-area: seven;
    content: var(--url-seven);
}
.gallery__eight {
    grid-area: eight;
    content: var(--url-eight);
}
.gallery__nine {
    grid-area: nine;
    content: var(--url-nine);
}

.section_header {
    display: grid;
    grid-template-areas:
        "image"
        "text";
    grid-template-columns: 1fr;
    grid-template-rows: 40px 40px;
    align-items: center;
}

.section_header__image {
    height: 100%;
    grid-area: image;
}

.section_header__text {
    grid-area: text;
}