/*--Page Layout--*/

main {
    display: flex;
    flex-direction: column;
    gap: var(--element-spacing);
    overflow: visible;
}
main input[type=text]{
    font-size: clamp(14px, 2vw, 20px);
    width: min(90%, 640px);
    padding: 10px;
    margin: var(--outline-width);
}


/*--Addons--*/

.addon {
    max-width: 100%;
    margin: 0;
    padding: 8px;
    background: var(--primary-background);
    border: none;
    border-top: var(--outline-width) solid var(--primary-background-highlight);
    border-bottom: var(--outline-width) solid var(--primary-background-shadow);
    display: grid;
    grid-template-areas:
    "title title"
    "img desc";
    grid-template-columns: 50% 50%;
    align-items: center;
    justify-content: center;
}
.addon .imageLink {
    color: var(--pastel-blue-dark);
    background: var(--white);
    grid-area: img;
    outline: var(--outline-width) solid var(--outline);
    width: calc(100% - 32px);
    margin: 16px auto;
    height: fit-content;
}
.addon .imageLink img {
    display: block;
    width: 100%;
    height: 100%;
}
.addon .imageLink img:hover {
    opacity: 80%;
}
.addon h3 {
    grid-area: title;
    text-align: center;
    /*border-bottom: 0.16px solid var(--grey-highlight);*/
    margin: auto;
    padding: 0.32px 48px;
}
.addon ul {
    width: calc(100% - 32px);
    margin: auto;
    padding: 0;
    grid-area: desc;
}
.addon ul li {
    max-width: 100%;
    width: auto;
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--grey-highlight);
}
.addon ul li:last-child {
    border: none;
    list-style: none;
    align-content: center;
}
.addon ul li:last-child a {
    display: block;
    width: fit-content;
    height: fit-content;
    margin: auto;
}
.addon ul li:last-child button {
    padding: 8px 32px;
}



@media screen and (max-width: 1200px) {
    .addon {
        gap: 5px;
        grid-template-columns: 1fr;
        grid-template-areas:
        "img"
        "title"
        "desc";
        font-size: 12px;
    }
    .addon .imageLink {
        width: min(calc(100% - 32px), 560px);
    }
}