:root {
    --row-width: 1920px;
    --cols: 2;
    --primary-color: #F9CFE3;
    --secondary-color: #423C90;
    --font-family: biorhyme-expanded, sans-serif;
    --header-font-family: gertie, sans-serif;
    --body-font-color: #000;
    --body-font-weight: 300;
    --anchor-color: var(--secondary-color);
    --anchor-hover-color: var(--body-font-color);
    --wrapper-padding: 25px;
}
html,
body {
    padding: 0;
    margin: 0;
}
body {
    background-color: var(--primary-color);
    font-family: var(--font-family);
    font-weight: var(--body-font-weight);
}
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.wrapper {
    display: grid;
    place-content: center;
    min-height: 100svh;
    box-sizing: border-box;
    text-align: center;
    padding: var(--wrapper-padding);
    background: url("../images/bg-top.png") no-repeat calc(100% - (var(--wrapper-padding) * 2)) top/350px auto, url("../images/bg-bottom.png") no-repeat calc(var(--wrapper-padding) * 2) bottom/300px auto;
}

main {
    --logo-width: 280px;
    text-align: center;
    .inner {
        padding-left: calc(var(--inner-padding) + 20px);
    }
}

p {
    line-height: 1.5;
}

a {
    color: var(--anchor-color);
    transition: .25s ease-out color;
    &:hover, &:focus-visible {
        --anchor-color: var(--anchor-hover-color);
    }
}

address {
    padding: 0 20px;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    a {
        text-decoration: none;
    }
}

figure.logo {
    margin: 0 0 30px 0;
    padding: 0;
    display: flex;
    align-items: center;
    img {
        max-width: var(--logo-width);
        margin: auto;
    }
    h1 {
        font-weight: normal;
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: 0;
        letter-spacing: 2px;
    }
}

figure.contact__image img {
    max-width: 200px;
}

.social-media-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.social-media-link a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--anchor-color);
    svg {
        width: 24px;
    }
}

@media (min-width: 768px) {
    --wrapper-padding: 50px;
    .wrapper {
        background: url("../images/bg-top.png") no-repeat calc(100% - (var(--wrapper-padding) * 2)) top/500px auto, url("../images/bg-bottom.png") no-repeat calc(var(--wrapper-padding) * 2) bottom/400px auto;
    }
}